react-native中AsyncStorage实例详解
程序员文章站
2023-12-20 12:11:34
react-native中asyncstorage实例详解
asyncstorage是一个简单的,具有异步特性的储存api,它的储存方式为键值对的方式,且对整个app而言...
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" } });
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!