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的打印数据

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

猜你喜欢