本文介绍了React Native中的数据本地存储，重点讲解了如何使用AsyncStorage以及react-native-storage库。详细阐述了添加库、数据的保存、修改、删除以及过期数据的处理方法，包括设置sync属性来同步更新过期数据。
目录
目录
2.5使用key和id来保存数据，一般是保存同类别（key）的大量数据。
yarn add react-native-storage2.3引入react-native-storage库
2.5使用key和id来保存数据，一般是保存同类别（key）的大量数据。
1.数据本地存储介绍
数据本地存储主要将数据存储到本地，存储的方式可以有多种，在类似用户登录场景下，我们希望网络断开或者下次进入应用时不用每次都填写用户名密码，我们通常会将用户名密码或者身份证明Token存储在本地；在React Native中常用两种数据存储方式：
a.AsyncStorage
AsyncStorage是一个简单的、异步的、持久化的 Key-Value 存储系统，它对于 App 来说是全局性的。可用来代替 LocalStorage。
各平台具体实现形式：在 iOS 上，AsyncStorage在原生端的实现是把较小值存放在序列化的字典中，而把较大值写入单独的文件。在 Android 上，AsyncStorage会尝试使用RocksDB，或退而选择 SQLite。
react-native-storage：通常会借用第三方react-native-storage对AsyncStorage进行封装，而不是直接使用AsyncStorage；
b.Realm
新的数据库存储框架，类似SQLite；
Realm平台是基于NoSQL的服务器和客户端组件的组合，通过快速高效的同步协议连接，以实现实时、连接的应用程序和服务，这些应用程序和服务响应迅速，性能不受网络状态的影响。领域平台有两个主要组件：领域数据库(Realm Database)和领域对象服务器(Realm Object Server)。这两个组件协同工作，可以自动同步数据，从而实现大量的用例，从离线的第一个应用程序、现场服务和数据收集应用程序、数据可用性和用户响应性是关键的移动服务。此外，通过与现有后端（SQL、Kafka等）的集成能力，Realm平台是在利用现有（有时是遗留）系统和数据源的同时，构建现代实时服务体验的极好方式。
注意：简单的key-value数据存储方式使用AsyncStorage实现，数据量较大使用Realm；
2.AsyncStorage使用
2.1react-native-storage
react-native-storage这是一个本地持久存储的封装，可以同时支持 react-native(AsyncStorage)和浏览器(localStorage)。ES6 语法，promise 异步读取，使用 jest 进行了完整的单元测试。
2.2添加库几种方式
a.在RN工程中找到package.json文件，在dependencies标签下添加react-native-storage库，我使用的WebStorm添加时会自动库的版本
"dependencies": {
"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.4",
"react-native-modal": "^6.5.0",
"react-native-storage": "^0.2.3",
}
WebStorm右下角会自动提示run npm...点击会自动安装react-native-storage库;
b.若使用的其他开发功能需要进入RN工程的目录执行如下命令，使用npm安装react-native-storage库，--save表示将该组件写入到package.json文件中。
npm install react-native-storage --save
当然，也可以采用yarn工具将该库添加到项目中
yarn add react-native-storage
2.3引入react-native-storage库
import { AsyncStorage } from 'react-native';
import Storage from 'react-native-storage';
let storage = new Storage({
// 最大容量，默认值1000条数据循环存储
size: 1000,
// 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage
// 如果不指定则数据只会保存在内存中，重启后即丢失
storageBackend: AsyncStorage,
// 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期，通常保存数据是不设置有效期的
defaultExpires: null,//1000 * 3600 * 24,
// 读写时在内存中缓存数据。默认启用。
enableCache: true, // 你可以在构造函数这里就写好sync的方法 // 或是在任何时候，直接对storage.sync进行赋值修改 // 或是写到另一个文件里，这里require引入
// 如果storage中没有相应数据，或数据已过期，
// 则会调用相应的sync方法，无缝返回最新数据。
// sync方法的具体说明会在后文提到
// 你可以在构造函数这里就写好sync的方法
// 或是在任何时候，直接对storage.sync进行赋值修改
// 或是写到另一个文件里，这里require引入
//sync: require('./RNSync.js').syncdata,//require('你可以另外写一个文件专门处理sync'),
});
// 最好在全局范围内创建一个（且只有一个）storage实例，方便直接调用
// 对于web
// window.storage = storage;
// 对于react native，定义全局变量
global.storage = storage;
// 这样，在此**之后**的任意位置即可以直接调用storage
// 注意：全局变量一定是先声明，后使用
// 如果你在某处调用storage报错未定义
// 请检查global.storage = storage语句是否确实已经执行过了
storage.sync = require('./RNAsyncStorage_Asyn').asyncdata;注意：storage.sync的设置放在创建方法的外面，是因为RNAsyncStorage_Asyn.js文件中调用了storage保存重新获取的数据，如果在创建方法里面，RNAsyncStorage_Asyn.js中的storage将因为尚未导出storage而出错；
RNAsyncStorage_Asyn.js调用storage内容如下：
if(json){
storage.save({
key: 'user',
id,
data: json,
expires: 1000 * 6
});
if (someFlag) {
// 根据syncParams中的额外参数做对应处理
}
console.log('resolve = ' + resolve, resolve);
// 成功则调用resolve
resolve && resolve(json);
}2.4.保存、修改和删除数据操作
import "./Storage";
export default class StorageOpt{
/**
* 保存数据
* @param key 键
* @param data 值
* @param expires 有效时间
*/
// 使用key来保存数据（key-only）。这些数据一般是全局独有的，需要谨慎单独处理的数据
// 批量数据请使用key和id来保存(key-id)，具体请往后看
// 除非你手动移除，这些数据会被永久保存，而且默认不会过期。
static save(key, data, expires){
storage.save({
key: key, // 注意:请不要在key中使用_下划线符号!
data: data,
// 如果不指定过期时间，则会使用defaultExpires参数
// 如果设为null，则永不过期
expires: expires
});
}
/**
* 读取数据
* @param key 键
* @param callBack 回调函数
*/
static loaddata(key, callBack){
storage.load({
key: key,
// 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语法
callBack(ret);
//return ret;
}).catch(err => {
//如果没有找到数据且没有sync方法，
//或者有其他异常，则在catch中返回
// console.warn(err.message);
switch (err.name) {
case 'NotFoundError':
// TODO;
break;
case 'ExpiredError':
// TODO
break;
}
//没找到数据返回空
callBack('');
});
}
/**
* 删除数据
* @param key 键
*/
static delete(key){
// 删除单个数据
storage.remove({
key: key
});
}
}注意：读取数据这里解释下syncInBackground-----为true的时候：如果数据过期，在调用sync方法的同时先返回已经过期的数据，但sync方法结束后不会调用promise返回新的数据。为false的时候，会等待sync方法promise返回最新数据
点击按钮调用保存、读取数据
import StorageOpt from "./public/datastorage/StorageOpt";
savedata = () => {
StorageOpt.save("token", 'klflkw4lkj2lk3j4lk32jl4', null)
}
readdata = () => {
StorageOpt.loaddata("token", function (data) {
Alert.alert('Storage读取token' , data)
})
}2.5使用key和id来保存数据，一般是保存同类别（key）的大量数据。
// 使用key和id来保存数据，一般是保存同类别（key）的大量数据。
// 所有这些"key-id"数据共有一个保存上限（无论是否相同key）
// 即在初始化storage时传入的size参数。
// 在默认上限参数下，第1001个数据会覆盖第1个数据。
// 覆盖之后，再读取第1个数据，会返回catch或是相应的sync方法。
var userA = {
name: 'A',
age: 20,
tags: ['geek', 'nerd', 'otaku'],
};
storage.save({
key: 'user', // 注意:请不要在key中使用_下划线符号!
id: '1001', // 注意:请不要在id中使用_下划线符号!
data: userA,
expires: 1000 * 60,
});
//load 读取
storage
.load({
key: 'user',
id: '1001',
})
.then(ret => {
// 如果找到数据，则在then方法中返回
console.log(ret.userid);
})
.catch(err => {
// 如果没有找到数据且没有sync方法，
// 或者有其他异常，则在catch中返回
console.warn(err.message);
switch (err.name) {
case 'NotFoundError':
// TODO;
break;
case 'ExpiredError':
// TODO
break;
}
});
// --------------------------------------------------
// 获取某个key下的所有id(仅key-id数据)
storage.getIdsForKey('user').then(ids => {
console.log(ids);
});
// 获取某个key下的所有数据(仅key-id数据)
storage.getAllDataForKey('user').then(users => {
console.log(users);
});
// !! 清除某个key下的所有数据(仅key-id数据)
storage.clearMapForKey('user');
// --------------------------------------------------
// 删除单个数据
storage.remove({
key: 'lastPage',
});
storage.remove({
key: 'user',
id: '1001',
});
// !! 清空map，移除所有"key-id"数据（但会保留只有key的数据）
storage.clearMap();3.过期数据处理(sync属性设置)
3.1定义storage.sync的同步方法
//从Storage导入storage
let storage = require('./Storage');
asyncdata = {
// 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);
});
}
};
exports.asyncdata = asyncdata;这里的http://localhost:8010/birds/storage是一个本地连接，将返回一个json数据，数据格式为{"name":"B","age":18,"tags":["geek1","nerd1","otaku1"]}
3.2测试获取过期数据
3.2.1保存数据
import "./Storage";
//这个对象和上面的http://localhost:8010/birds/storage返回的json数据的格式是一样的
let userA = {
name: 'A',
age: 20,
tags: [
'geek',
'nerd',
'otaku'
]
};
//将userA这个对象存储起来
storage.save({
key: 'user', // 注意:请不要在key中使用_下划线符号!
id: '1001', // 注意:请不要在id中使用_下划线符号!
data: userA,
expires: 1000 * 6
});3.2.2获取6秒以后过期的数据
storage.load({
// key: key,
key: 'user',
id: '1001',
// autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
autoSync: true,
// syncInBackground(默认为true)意味着如果数据过期，
// 在调用sync方法的同时先返回已经过期的数据。
// 设置为false的话，则始终强制返回sync方法提供的最新数据(当然会需要更多等待时间)。
syncInBackground: false,
// 你还可以给sync方法传递额外的参数
syncParams: {
extraFetchOptions: {
// 各种参数
},
someFlag: true,
},
}).then(ret => {
// 如果找到数据，则在then方法中返回
// 注意：这是异步返回的结果（不了解异步请自行搜索学习）
// 你只能在then这个方法内继续处理ret数据
// 而不能在then以外处理
// 也没有办法“变成”同步返回
// 你也可以使用“看似”同步的async/await语法
callBack(ret);
//return ret;
}).catch(err => {
//如果没有找到数据且没有sync方法，
//或者有其他异常，则在catch中返回
// console.warn(err.message);
switch (err.name) {
case 'NotFoundError':
// TODO;
break;
case 'ExpiredError':
// TODO
break;
}
//没找到数据返回空
callBack('');
});上面设置了过期时间为6秒，6秒之后数据过期，将会自动调用RNAsyncStorage_Asyn文件中的方法，然后返回一个新的数据为请求过来的json，并保存起来
输出日志
aaaaaaaaaaaaaa{"id":"1001","syncParams":{"extraFetchOptions":{},"someFlag":true},"syncInBackground":false}
参考：
https://github.com/sunnylqm/react-native-storage/blob/HEAD/README.zh-CN.md
扫一扫
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
