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 --save
• import 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地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！