react-native中AsyncStorage实例详解

2024-02-26 11:54:02 314

react-native中AsyncStorage实例详解

AsyncStorage是一个简单的，具有异步特性的储存API，它的储存方式为键值对的方式，且对整个App而言，是全局的。

AsyncStorage提供了较全的方法供我们使用，每个方法都有一个回调函数，而回调函数的第一个参数都是错误对象error，所有的方法执行之后都会返回一个Promise对象。

方法：

staticgetItem(key:string,callback?:?(error:?Error,result:?string)=>void)

读取key字段并将结果作为第二个参数传递给callback。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。

staticsetItem(key:string,value:string,callback?:?(error:?Error)=>void)

将key字段的值设置成value，并在完成后调用callback函数。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。

staticremoveItem(key:string,callback?:?(error:?Error)=>void)

删除一个字段。返回一个Promise对象。

staticmergeItem(key:string,value:string,callback?:?(error:?Error)=>void)

假设已有的值和新的值都是字符串化的JSON，则将两个值合并。返回一个Promise对象。还没有被所有原生实现都支持。

staticclear(callback?:?(error:?Error)=>void)

删除全部的AsyncStorage数据，不论来自什么库或调用者。通常不应该调用这个函数——使用removeItem或者multiRemove来清除你自己的key。返回一个Promise对象。

staticgetAllKeys(callback?:?(error:?Error,keys:?Array)=>void)

获取所有本应用可以访问到的数据，不论来自什么库或调用者。返回一个Promise对象。

staticflushGetRequests()

清除所有进行中的查询操作。

staticmultiGet(keys:Array,callback?:?(errors:?Array,result:?Array>)=>void)

获取keys所包含的所有字段的值，调用callback回调函数时返回一个key-value数组形式的数组。返回一个Promise对象。

multiGet(['k1','k2'],cb)->cb([['k1','val1'],['k2','val2']])

staticmultiSet(keyValuePairs:Array>,callback?:?(errors:?Array)=>void)

multiSet和multiMerge都接受一个与multiGet输出值一致的key-value数组的数组。返回一个Promise对象。

multiSet([['k1','val1'],['k2','val2']],cb);

staticmultiRemove(keys:Array,callback?:?(errors:?Array)=>void)

删除所有键在keys数组中的数据。返回一个Promise对象。

staticmultiMerge(keyValuePairs:Array>,callback?:?(errors:?Array)=>void)

将多个输入的值和已有的值合并，要求都是字符串化的JSON。返回一个Promise对象。

还没有被所有原生实现都支持。

小例子：

importReactfrom'react';
import{View,StyleSheet,Text,AsyncStorage}from'react-native';

exportdefaultclassRootextendsReact.Component{
constructor(props){
super(props);
this.set=this.set.bind(this);
this.get=this.get.bind(this);
this.clear=this.clear.bind(this);
}
//渲染
render(){

return(

储存数据

获取数据


清除数据


);
}
set(){
AsyncStorage.setItem('name','gefufeng',(error)=>{
if(error){
alert("储存失败");
}else{
alert("储存成功");
}
});
}
get(){
AsyncStorage.getItem('name',(error,result)=>{
if(error){
alert("获取失败");
}else{
alert("数据为："+result);
}
});
}
clear(){
AsyncStorage.removeItem('name',(error)=>{
if(!error){
alert("清除成功");
}
});
}
}
conststyle=StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:"#F5FCFF"
}

});

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

react-native中AsyncStorage实例详解

热门推荐

随机推荐