React Native中Storage使用详解和封装
在移动端开发中，数据库存储肯定是避免不了的需求，在iOS中，我们也经常使用NSUserDefault单利类来存储一些简单的用户信息等数据，在web开发中我们经常使用LocalStorage来存储简单数据，在React Native中，我们可以选择直接使用官方推荐的数据存储组件AsyncStorage组件，但是有时候使用起来还是不够简单，功能不够多，这时我们就会选择封装一个storage，我们选择使用三方的react-native-storage 来进一步封装
react-native-storage 官方文档
https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md
作者提供封装好的storage组件Demo示例
https://github.com/guangqiang-liu/react-native-storage-Demo
安装react-native-storage组件
npm install react-native-storage --saveimport Storage from 'react-native-storage'import { AsyncStorage } from 'react-native'import {sync} from './sync'
如何封装
这里封装storage，我们根据官方文档的建议，我们将采用单利模式来进行封装，单利模式对于iOS开发的同学们肯定不陌生，其实web开发也有单例模式，是常用开发模式中的一种
- 初始化
首先我们得创建一个storage全局单利对象
代码如下：
const createStorage = () => {
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的方法
// 或是在任何时候，直接对storage.sync进行赋值修改
// 或是写到另一个文件里，这里require引入
sync: sync
})
}
- 判断这个storage单利对象是否存在，不存在就创建一个
const initStorage = () => {
if (!storage) {
createStorage()
}
}
- 完善storage 增删改查等功能API
核心代码
const _storage = {
// 使用key来保存数据。这些数据一般是全局独有的，常常需要调用的。
// 除非你手动移除，这些数据会被永久保存，而且默认不会过期。
save(key, obj) {
initStorage()
storage.save({
key: key, // 注意: 请不要在key中使用_下划线符号!
data: obj,
// 如果不指定过期时间，则会使用defaultExpires参数
// 如果设为null，则永不过期
expires: defaultExpires
})
},
// 取数据
load(key, callBack) {
initStorage()
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 && callBack(ret)
return ret
}).catch(err => {
//如果没有找到数据且没有sync方法，
//或者有其他异常，则在catch中返回
console.warn(err.message);
switch (err.name) {
case 'NotFoundError':
// TODO
break
case 'ExpiredError':
// TODO
break
}
})
},
// 获取某个key下的所有id(仅key-id数据)
getIdsForKey(id, callback) {
initStorage()
storage.getIdsForKey(id).then(ids => {
callback && callback(ids)
})
},
// 获取某个key下的所有数据(仅key-id数据)
getAllDataForKey(key, callback) {
initStorage()
storage.getAllDataForKey(key).then(users => {
callback && callback(users)
})
},
// !! 清除某个key下的所有数据(仅key-id数据)
clearMapForKey(key) {
initStorage()
storage.clearMapForKey(key)
},
// 删除单个数据
remove(key) {
initStorage()
storage.remove({
key: key
})
},
// !! 清空map，移除所有"key-id"数据（但会保留只有key的数据）
clearMap() {
initStorage()
storage.clearMap()
}
}
- 导出单利类
export {_storage as storage}
注意： 上面的基本使用方式官方文档也都说的很详细了，这里重点介绍下，new Storage 中的 sync: sync
这个用法是说：调用storage.load时，如果本地并没有存储相应的user数据，那么会自动触发storage.sync.user去远程网络请求获取user数据并无缝返回过来
- 创建sync 文件，同步远程数据（刷新）
核心代码
/**
* Created by guangqiang on 2017/11/15.
*/
import {storage} from './index'
/**
* sync方法的名字必须和所存数据的key完全相同
* 方法接受的参数为一整个object，所有参数从object中解构取出
* 这里可以使用promise。或是使用普通回调函数，但需要调用resolve或reject
* @type {{user: ((params))}}
*/
const sync = {
user(params) {
let { id, resolve, reject, syncParams: { extraFetchOptions, someFlag } } = params
fetch('http://www.baidu.com', {
method: 'GET',
body: 'id=' + id,
...extraFetchOptions,
}).then(response => {
return response.json()
}).then(json => {
//console.log(json)
if(json && json.user){
storage.save({
key: 'user',
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 {sync}
附加功能
- 读取批量数据
// 使用和load方法一样的参数读取批量数据，但是参数是以数组的方式提供。
// 会在需要时分别调用相应的sync方法，最后统一返回一个有序数组。
storage.getBatchData([
{ key: 'loginState' },
{ key: 'checkPoint', syncInBackground: false },
{ key: 'balance' },
{ key: 'user', id: '1009' }
])
.then(results => {
results.forEach( result => {
console.log(result);
})
})
//根据key和一个id数组来读取批量数据
storage.getBatchDataWithIds({
key: 'user',
ids: ['1001', '1002', '1003']
})
.then( ... )
这两个方法除了参数形式不同，还有个值得注意的差异。getBatchData会在数据缺失时挨个调用不同的sync方法(因为key不同)。但是getBatchDataWithIds却会把缺失的数据统计起来，将它们的id收集到一个数组中，然后一次传递给对应的sync方法(避免挨个查询导致同时发起大量请求)，所以你需要在服务端实现通过数组来查询返回，还要注意对应的sync方法的参数处理（因为id参数可能是一个字符串，也可能是一个数组的字符串）
使用方式
import {storage} from './storage'
componentDidMount() {
let obj = {}
obj.name = '张三'
obj.age = 20
obj.sex = 'man'
// 存
storage.save('userInfo', obj)
// 取
storage.load('userInfo', (data) => {
alert(data.name)
})
}
更多文章
- 作者React Native开源项目OneM【500+ star】地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM：欢迎小伙伴们 star
- 作者简书主页：包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们：多多关注，多多点赞
- 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
- 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！
小伙伴们扫下方二维码加入RN技术交流QQ群
QQ群二维码，500+ RN工程师在等你加入哦
