React Native官网上有提供AsyncStorage作为数据持久化，类似于ios中的NSUserDefaults,而且官方推荐和维护了react-native-storage模块，下面就讲解下react-native-storage的使用。
第一步 执行 npm install react-native-storage --save
接下来直接上代码
首先创建MyStorage.js 和 sync.js
在MyStorage.js中
import React, { Component } from 'react';
import Storage from 'react-native-storage';
import {
AppRegistry,
View,AsyncStorage
} from 'react-native';
import SYNC from './sync';
var storage;
var defaultExpires = 1000*3600*24;
var size = 1000;
export default class MySorage extends Component{
static _getStorage(){
if(storage==undefined){
storage = new Storage({
// 最大容量，默认值1000条数据循环存储
size: size,
// 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage
// 如果不指定则数据只会保存在内存中，重启后即丢失
storageBackend: AsyncStorage,
// 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期
defaultExpires: defaultExpires,
// 读写时在内存中缓存数据。默认启用。
enableCache: true,
// 如果storage中没有相应数据，或数据已过期，
// 则会调用相应的sync方法，无缝返回最新数据。
// sync方法的具体说明会在后文提到
// 你可以在构造函数这里就写好sync的方法
// 或是写到另一个文件里，这里require引入
// 或是在任何时候，直接对storage.sync进行赋值修改
sync: SYNC // 这个sync文件是要你自己写的
});
global.storage = storage;
}
return storage;
}
/**
key:保存的key值
object：保存的value
expires：有效时间，
*/
static _sava3(key,object,expires){
this.isInit();
storage.save({
key: key, // 注意:请不要在key中使用_下划线符号!
data: object,
// 如果不指定过期时间，则会使用defaultExpires参数
// 如果设为null，则永不过期
expires: expires
});
}
static _sava(key,object){
this._sava3(key,object,defaultExpires);
}
static _remove(key){
this.isInit();
// 删除单个数据
storage.remove({
key: key,
});
}
static _removeAll(){
this.isInit();
// 移除所有"key-id"数据（但会保留只有key的数据）
storage.clearMap();
}
static _clearDataByKey(key){
this.isInit();
// !! 清除某个key下的所有数据
storage.clearMapForKey(key);
}
/**
查询数据
*/
static _load(key,callBack){
this._load3(key,null,null,callBack);
}
static _load3(key,params,someFlag,callBack){
this.isInit();
storage.load({
key: key,
// autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
autoSync: true,
// syncInBackground(默认为true)意味着如果数据过期，
// 在调用sync方法的同时先返回已经过期的数据。
// 设置为false的话，则始终强制返回sync方法提供的最新数据(当然会需要更多等待时间)。
syncInBackground: true,
// 你还可以给sync方法传递额外的参数
syncParams:{ params,
someFlag: someFlag,
},
}).then(ret => {
callBack(ret);
return ret;
}).catch(err => {
//如果没有找到数据且没有sync方法，
//或者有其他异常，则在catch中返回
console.warn(err.message);
switch (err.name) {
case 'NotFoundError':
// TODO;
break;
case 'ExpiredError':
// TODO
break;
}
});
}
static isInit(){
if(storage==undefined){
throw "请先调用_getStorage()进行初始化";
}
}
}
然后是同一目录下的sync.js
let SYNC = {};
SYNC.user3 =(params)=>{
if(params == null) return;
// sync方法的名字必须和所存数据的key完全相同
// 方法接受的参数为一整个object，所有参数从object中解构取出
// 这里可以使用promise。或是使用普通回调函数，但需要调用resolve或reject。
let { id, resolve, reject, syncParams: { extraFetchOptions, someFlag } } = params;
fetch('user/', {
method: 'GET',
body: 'id=' + id,
...extraFetchOptions,
}).then(response => {
return response.json();
}).then(json => {
//console.log(json);
if(json && json.user){
storage.save({
key: 'user',
id,
data: json.user
});
if (someFlag) {
// 根据syncParams中的额外参数做对应处理
}
// 成功则调用resolve
resolve && resolve(json.user);
}
else{
// 失败则调用reject
reject && reject(new Error('data parse error'));
}
}).catch(err => {
console.warn(err);
reject && reject(err);
});
}
export default SYNC
最后调用的时候一定要先初始化
MySorage._getStorage(); //初始化
MySorage._sava('phone',username); 赋值
MySorage._load('phone',function(data){ 取值
console.log('手机号'+data);
})
打工是不可能的.gif
