从零学React Native之13 持久化存储

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

借助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