当前位置： 移动技术网 > 移动技术>移动开发>IOS > react-native中AsyncStorage实例详解

react-native中AsyncStorage实例详解

2019年07月24日  | 移动技术网移动技术  | 我要评论

react-native中asyncstorage实例详解

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

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

方法：

static getitem(key: string, callback?: ?(error: ?error, result: ?string) => void) 

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

static setitem(key: string, value: string, callback?: ?(error: ?error) => void) 

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

static removeitem(key: string, callback?: ?(error: ?error) => void) 

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

static mergeitem(key: string, value: string, callback?: ?(error: ?error) => void) 

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

static clear(callback?: ?(error: ?error) => void) 

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

static getallkeys(callback?: ?(error: ?error, keys: ?array<string>) => void) 

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

static flushgetrequests() 

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

static multiget(keys: array<string>, callback?: ?(errors: ?array<error>, result: ?array<array<string>>) => void) 

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

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

static multiset(keyvaluepairs: array<array<string>>, callback?: ?(errors: ?array<error>) => void) 

multiset和multimerge都接受一个与multiget输出值一致的key-value数组的数组。返回一个promise对象。

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

static multiremove(keys: array<string>, callback?: ?(errors: ?array<error>) => void) 

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

static multimerge(keyvaluepairs: array<array<string>>, callback?: ?(errors: ?array<error>) => void) 

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

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

小例子：

import react from 'react';
import {view,stylesheet,text,asyncstorage} from 'react-native';

export default class root extends react.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 (
  <view style = {style.container}>
  <text onpress = {this.set}>储存数据</text>
  <text style = {{margintop: 10}} onpress = {this.get}>
   获取数据
  </text>
  <text style = {{margintop: 10}} onpress = {this.clear}>
   清除数据
  </text>
  </view>
 );
 }
 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("清除成功");
  }
 });
 }
}
const style = stylesheet.create({
 container : {
 flex: 1,
 alignitems: 'center',
 justifycontent: 'center',
 backgroundcolor : "#f5fcff"
 }

});

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网