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
