React Native中Storage使用详解和封装

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【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工程师在等你加入哦

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值