博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
从零学React Native之13 持久化存储
阅读量:6967 次
发布时间:2019-06-27

本文共 4521 字,大约阅读时间需要 15 分钟。

数据持久化就是指应用程序将某些数据存储在手机存储空间中。

借助native存储

这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见

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可以参考

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形式进行保存,就可以满足绝大多数需求了。

我们借助下上篇文章中 中的json文件,通过JSON类就可以转化为字符串了, 注意,因为JSON是js自带的对象千万别化蛇添足把JSON添加到import组件中

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,公众账号名称:爱上Android。

转载地址:http://dfssl.baihongyu.com/

你可能感兴趣的文章
jstl foreach标签格式化date,string类型数据
查看>>
HQL基础Query简单查询结果for输出和Iterator输出
查看>>
Vmware vSphere 5.0网络和存储功能简介
查看>>
辞职了,一身轻松,仿如隔世
查看>>
linux下which、whereis等命令的区别
查看>>
SCOM 常识概念—AD集成/HSRP/MVC和WCF/OLE DB/分佈式應用程式
查看>>
SSDB Windows安装包
查看>>
使用gulp-connect实现web服务器
查看>>
Android APP弱网测试问题和解决分析
查看>>
深入研究EF Core AddDbContext 引起的内存泄露的原因
查看>>
set集合
查看>>
今天不谈技术,说说一些常用的软件~By 逆天
查看>>
Python爬虫入门二之爬虫基础了解
查看>>
java入门概念个人理解之访问修饰符
查看>>
分布式 vs 集群 主从 vs 集群
查看>>
javascript数组操作汇总
查看>>
静态链表
查看>>
Ubuntu 12.04中文输入法的安装
查看>>
[转] 你真的了解回流和重绘吗
查看>>
[转] babel-present-env 与 babel-polyfill 学习总结
查看>>