React-Native 数据存储之react-native-storage的简单使用

react-native-storage是封装好的数据存储组件，安装方法见：https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md

本文只介绍个人使用的过程：

首先导入组件import Storage from 'react-native-storage';
创建一个全局的Storage：

创建一个js文件RNAsyncStorage
 
let storage = new Storage({
    //最大容量，默认值1000条数据循环存储
    size: 1000,
 
    //存储引擎：RN使用AsyncStorage
    //如果不指定则数据只会保存在内存中，重启后即丢失
    storageBackend: AsyncStorage,
 
    //数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期
    defaultExpires: 1000 * 3600 * 24,
 
    //读写时在内存中缓存数据，默认开启
    enableCache: true,
 
    // 如果storage中没有相应数据，或数据已过期，
    // 则会调用相应的sync方法，无缝返回最新数据。
    // sync方法的具体说明会在后文提到
    // 你可以在构造函数这里就写好sync的方法
    // 或是在任何时候，直接对storage.sync进行赋值修改
    // 或是写到另一个文件里，这里require引入
});
//导出`storage`
exports.storage = storage;
//在这里设置`storage.sync`
storage.sync = require('./RNAsyncStorage_asyn').ssss;

注意storage.sync的设置放在了创建方法的外面，是因为RNAsyncStorage_asyn文件中使用了storage，（如果放在创建方法里面，RNAsyncStorage_asyn中的storage将因为尚未导出storage而出现错误）

1：单纯的存储和读取：

存储方法：
_saveData =()=> {
        storage.save({
            key: 'loginState',
            data: {
                userid: '111 userid',
            },
            //expires为有效时间
            expires: 1000 * 3600
        })
    };

//读取方法
_readData =()=> {
         storage.load({
             key: 'loginState',
             // autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
             autoSync: true,
 
             // syncInBackground(默认为true)意味着如果数据过期，
             // 在调用sync方法的同时先返回已经过期的数据。
             // 设置为false的话，则等待sync方法提供的最新数据(当然会需要更多时间)。
             syncInBackground: true,
 
             // 你还可以给sync方法传递额外的参数
             syncParams: {
                 extraFetchOptions: {
                     // 各种参数
                 },
                 someFlag: true,
             },
         }).then(ret => {
             // 如果找到数据，则在then方法中返回
             // 注意：这是异步返回的结果（不了解异步请自行搜索学习）
             // 你只能在then这个方法内继续处理ret数据
             // 而不能在then以外处理
             // 也没有办法“变成”同步返回
             // 你也可以使用“看似”同步的async/await语法
 
             console.log(ret.userid);
             this.setState({ data: ret.userid});
         }).catch(err => {
             //如果没有找到数据且没有sync方法，
             //或者有其他异常，则在catch中返回
             console.warn(err.message);
             switch (err.name) {
                 case 'NotFoundError':
                     // TODO;
                     this.setState({ data: 'NotFoundError' });
                     break;
                 case 'ExpiredError':
                     this.setState({ data: 'ExpiredError' });
                     break;
             }
         })

这里解释下syncInBackground-----为ture的时候：如果数据过期，在调用sync方法的同时先返回已经过期的数据，但sync方法结束后不会调用promise返回新的数据。为false的时候，会等待等待sync方法promise返回最新数据

Untitled14.gif

2：重点介绍当数据过期，调用sync的处理

2.1：设置storage.sync

创建一个js文件RNAsyncStorage_asyn
 
//从RNAsyncStorage文件导出storage
let aaa = require('./RNAsyncStorage');
let storage = aaa.storage;
 
ssss = {
    // sync方法的名字必须和所存数据的key完全相同
    // 方法接受的参数为一整个object，所有参数从object中解构取出
    // 这里可以使用promise。或是使用普通回调函数，但需要调用resolve或reject。
    user(params){
        let { id, resolve, reject, syncParams: { extraFetchOptions, someFlag } } = params;
        //resolve, reject只有在syncInBackground为false时候才被定义
        console.log('aaaaaaaaaaaaaa' + JSON.stringify(params));
        //{"id":"1001","syncParams":{"extraFetchOptions":{},"someFlag":true}}
        fetch('http://localhost:8010/birds/storage', {
            method: 'GET',
            // body: 'id=' + id,
            ...extraFetchOptions,
        }).then(response => {
            console.log('fetch数据11 === ' + JSON.stringify(response));
            return response.json();
        }).then(json => {
            //{"name":"B","age":18,"tags":["geek1","nerd1","otaku1"]}
            console.log('fetch数据22 === ' + JSON.stringify(json));
            if(json){
                storage.save({
                    key: 'user',
                    id,
                    data: json,
                    expires: 1000 * 6
                });
 
                if (someFlag) {
                    // 根据syncParams中的额外参数做对应处理
                }
                console.log('resolve = ' + resolve, resolve);
                // 成功则调用resolve
                resolve && resolve(json);
            }
            else{
                // 失败则调用reject
                reject && reject(new Error('data parse error'));
            }
        }).catch(err => {
            console.warn('bbbbbbbb' + err);
            reject && reject(err);
        });
    }
};
//导出ssss
exports.ssss = ssss;

这里的http://localhost:8010/birds/storage是一个本地连接，将返回一个json数据，数据格式为{"name":"B","age":18,"tags":["geek1","nerd1","otaku1"]}

2.2：先存储一个数据

//这个对象和上面的http://localhost:8010/birds/storage返回的json数据的格式是一样的
let userA = {
    name: 'A',
    age: 20,
    tags: [
        'geek',
        'nerd',
        'otaku'
    ]
};
将userA这个对象存储起来
_saveData11 =()=> {
        storage.save({
            key: 'user',  // 注意:请不要在key中使用_下划线符号!
            id: '1001',   // 注意:请不要在id中使用_下划线符号!
            data: userA,
            expires: 1000 * 6
        });
    };

2.3：读取上面的数据

_readData11 =()=> {
        //load 读取
        storage.load({
            key: 'user',
            id: '1001',
            // autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
            autoSync: true,
            // syncInBackground(默认为true)意味着如果数据过期，
            // 在调用sync方法的同时先返回已经过期的数据。
            // 设置为false的话，则等待sync方法提供的最新数据(当然会需要更多时间)。
            //这里设置为false，因为我需要返回最新的值
            syncInBackground: false,
 
            // 你还可以给sync方法传递额外的参数
            syncParams: {
                extraFetchOptions: {
                    // 各种参数
                },
                someFlag: true,
            },
        }).then(ret => {
            // 如果找到数据，则在then方法中返回
            console.log('_readData11==' + ret.age);
            this.setState({age: ret.age})
        }).catch(err => {
            // 如果没有找到数据且没有sync方法，
            // 或者有其他异常，则在catch中返回
            console.warn('_readData11 error =' + err.message);
            switch (err.name) {
                case 'NotFoundError':
                    // TODO;
                    break;
                case 'ExpiredError':
                    // TODO
                    break;
            }
        })
    }

上面设置了过期时间为6秒，6秒之后数据过期，将会自动调用RNAsyncStorage_asyn文件中的方法，然后返回一个新的数据为请求过来的json，并保存起来

调用storage.sync的打印数据

53504076-E39D-4D3C-BD7C-4E18B1D97666.png

Untitled15.gif