从零学React Native之13 持久化存储
2016-09-08 17:19
162 查看
数据持久化就是指应用程序将某些数据存储在手机存储空间中。
它是简单的,异步的。用它可以取代Android的sharedperference和ios的NSUserDefault。
AsyncStorage存储的数据对该RN应用全局都是可以访问的,只需要知道通过它增删改查数据就可以了。
写入数据有好几种方式,直接看代码:
输出结果:
当然, 还可以通过AsyncStorage的静态函数multiSet一次存储多个数据。
Promise机制还可以通过下面的方式捕获异常,如果不了解Promise可以参考[React Native]Promise机制
直接看代码:
当然也可以通过getAllKeys函数获取当前存储的所有键,再通过multiGet获取所有值。两个函数的原型分别是:
官方示例代码:
注意的是,AsyncStorage API存储数据是无序的。
开发者还可以通过AsyncStorage的静态函数flushGetRequests取消前面的所有未执行的完成的multiGet操作。
最好也借助Promise机制。
函数原型:
写法和上面差不多, 就不列举示例代码了。
但是配合JSON类,把JSON格式的对象转换为一个字符串。然后通过AsyncStorage类的key-value形式进行保存,就可以满足绝大多数需求了。
我们借助下上篇文章中[React Native] 解析JSON文件 中的json文件,通过JSON类就可以转化为字符串了
读取出来的字符串也可以转换回JSON对象。
需要注意的是 JSONparse函数要求严格,不允许有尾逗号,如果有机会抛出异常,如下:
处理sqlite还有比较牛的就是realm,realm也支持react native了。大家可以按照官方文档去配置。
https://realm.io/docs/react-native/latest/
调用数据库相对复杂了,我们后面再详细介绍。
更多精彩请关注微信公众账号likeDev
借助native存储
这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发AsyncStorage API
RN框架为开发者提供了 AsyncStorage API,开发者可以利用它将任意“字符串键值对”保存到存储空间中。它是简单的,异步的。用它可以取代Android的sharedperference和ios的NSUserDefault。
AsyncStorage存储的数据对该RN应用全局都是可以访问的,只需要知道通过它增删改查数据就可以了。
写入数据
开发者可以通过静态函数setItem来存储数据。setItem的JavaScript原型是:static object setItem(key, value,aCallBack)
写入数据有好几种方式,直接看代码:
// 构造 constructor(props) { super(props); this.doSomething=this.doSomething.bind(this); } doSomething(error){ if(error!=null){ //如发生错误 处理 console.log('error message:'+error.message); return; } // 执行保存成功的操作 console.log("name保存成功!"); } //下面4种写法, 推荐第三种和第四种 componentWillMount() { //最简单的写法 , 无法检测保存何时结束,是否成功 AsyncStorage.setItem('NO','01'); console.log("NO保存成功"); // 通过自带的回调方法,一旦发生出错就可以监控到 AsyncStorage.setItem('name','张三',this.doSomething); //Promise操作 ES2015推荐的写法 AsyncStorage.setItem('age',"18").then( ()=>{ //成功的操作 console.log("age保存成功!"); }, ); // 使用ES2017推荐的异步的写法 this.saveSex(); } // 箭头函数不需要在构造函数中bind(this)了 saveSex = async ()=> { try { await AsyncStorage.setItem('sex','female'); console.log("sex保存成功!"); } catch(error) { console.error(error); } };
输出结果:
当然, 还可以通过AsyncStorage的静态函数multiSet一次存储多个数据。
static object multiSet(aArray, aCallback) //参数类型 multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
Promise机制还可以通过下面的方式捕获异常,如果不了解Promise可以参考[React Native]Promise机制
AsyncStorage.multiSet([['name','李四'],["sex","male"]]) .then( ()=>{ console.log("name,sex保存成功"); } ).catch((errors)=>{ console.log('error,length:'+errors.length); if(errors.length>0){ //保存操作有异常 console.log(errors[0].message); //... }else{ //异常不是数组,有可能是成功操作的处理函数抛出的异常 //... } });
获取数据
可以通过AsyncStorage类的静态函数getItem获取数据,JS原型是:static object getItem(aKey,aCallback)
直接看代码:
componentWillMount() { //... //方式一 读取数据 AsyncStorage.getItem("name", this.handleResult); //方式二 AsyncStorage.getItem('sex') .then( //使用Promise机制的方法 (result)=> { //使用Promise机制,如果操作成功不会有error参数 if (result == null) { //没有指定的key return; } console.log("sex:" + result); } ).catch((error)=> { //读取操作失败 console.log('error:' + error.message); }); } handleResult(error, result) { if (error != null) { console.log('error message:' + error.message); return; } if (result == null) { //没有指定的key return; } console.log("name:" + result); }
当然也可以通过getAllKeys函数获取当前存储的所有键,再通过multiGet获取所有值。两个函数的原型分别是:
static object getAllkeys([aCallback]) static object multiGet(aArrays,aCallBack)
官方示例代码:
AsyncStorage.getAllKeys((err, keys) => { AsyncStorage.multiGet(keys, (err, stores) => { stores.map((result, i, store) => { // get at each store's key/value so you can work with it let key = store[i][0]; let value = store[i][1]; }); }); });
注意的是,AsyncStorage API存储数据是无序的。
开发者还可以通过AsyncStorage的静态函数flushGetRequests取消前面的所有未执行的完成的multiGet操作。
static object flushGetRequests()
最好也借助Promise机制。
删除数据
删除数据通过 removeItem或者multiRemove 删除。 当然还可以通过clear函数全部清空。函数原型:
static removeItem(key, callback?) static multiRemove(keys, callback?) static clear(callback?)
写法和上面差不多, 就不列举示例代码了。
JSON对象存储
使用AsyncStorage类保存数据,只能通过key-value形式保存一个字符串类型的数据。很难满足开发者的需求。但是配合JSON类,把JSON格式的对象转换为一个字符串。然后通过AsyncStorage类的key-value形式进行保存,就可以满足绝大多数需求了。
我们借助下上篇文章中[React Native] 解析JSON文件 中的json文件,通过JSON类就可以转化为字符串了
let studentData = require('./data/student.json'); let newJSONString=JSON.stringify(studentData);
读取出来的字符串也可以转换回JSON对象。
let jsonObject=JSON.parse(newJSONString)
需要注意的是 JSONparse函数要求严格,不允许有尾逗号,如果有机会抛出异常,如下:
JSON.parse('{"name":"张三" ,}');
数据库
如果你想存放数据结构复杂的数据的时候,就需要用到数据库,比如sqlite这种跨平台的数据存储方式在ReactNative里也有对应的方式,那就是react-native-sqlite。点这里可以进行下载集成到应用程序中。处理sqlite还有比较牛的就是realm,realm也支持react native了。大家可以按照官方文档去配置。
https://realm.io/docs/react-native/latest/
调用数据库相对复杂了,我们后面再详细介绍。
更多精彩请关注微信公众账号likeDev
相关文章推荐
- 从零学React Native之13 持久化存储
- iOS持久化存储-CoreData简介
- Apache Ignite:如何从持久化存储中读取数据
- Hyper-V 3.0部署PART 13:添加iSCSI共享存储
- 数据结构(13)二叉树的动态链表存储和遍历的实现
- Android数据持久化存储方式
- 数据持久化3种方式:属性列表、对象归档、数据库存储
- [置顶] kubernetes资源对象--持久化存储Persistent Volume和Persistent Volume Claim
- IOS学习:ios开发之数据的持久化存储机制
- KV数据存储:持久化
- kubernetes资源类型--持久化存储Persistent Volume和Persistent Volume Claim
- iOS中常用的持久化存储方式
- Kubernetes - 使用Glusterfs做持久化存储
- redis,mysql,memcache的区别与比较,redis两种数据存储持久化方式
- ios持久化存储
- 核心数据库CoreData之NSPersistentStoreCoordinator持久化存储
- 持久化存储系统ttserver的安装配置
- OpenShift实战(四):OpenShift持久化存储Redis
- 【Quartz】Quartz存储与持久化-基于Spring的配置
- IOS开发-本地持久化存储sqlite应用