ReactNative进阶之react-native-storage的使用及封装

本篇博客将带大家展开reactnative中关于数据持久化存储的学习。其中涉及到了nodejs的语法的相关知识，也稍做介绍。好了，废话不多说。在androind中数据的持久化存储用的比较多的就是shareperferce，通过shareperferce会在手机创建一个xml文件，其中数据就是已key-value的键值对存储的。reactnative方式也是相似的，不过他的存储数据结构是json串。下面看一下官网的截图。

这里写图片描述

关于AsyncStorage的介绍大体浏览一遍就可以了。重点看红字部分。推荐有使用react-native-storage模块。 有人问，为什么使用这个模块？人家不是说了吗？提供了更多便利的功能。本文也是主要讲解react-native-storage模块的使用和封装。

react-native-storage的使用也很简单，按照步骤来就可以了。

第一步：不用多说，打开github看文档（https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md）

第二步：执行命令，下载module。npm install react-native-storage –save

第三步：可以愉快的玩耍了，参照文档集成到项目中。

第四步：根据自己需求进行封装。方便以后使用。

其中我认为比较重要的就是第二步和第四步了，至于第三步完全就是复制粘贴。接下来我就将react-native-storage的简单封装给大家介绍下。
react-native-storage的核心类是Storage，增删查都是通过Storage对象完成的，在使用的时候要先全局配置存储的基本属性，例如保存时间等。接下来就是存储，删除，查询的那些操作了。

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文件是要你自己写的
        });
      }   

      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()进行初始化";
    }
  }

}

全局配置只需配置一次即可，这个配置参数介绍的很详细，我就不罗嗦了。重点看_getStorage（）中sync这个字段。这里接受的是一个对象。在本地查询不到结果的时候，会根据查询key的值加载对象中的方法（方法名就是key）。而SYNC 就是我们导出的js文件，这里就涉及到nodejs中的模块这个概念`，模块是用来隔离和实现不同功能的片段，javaScrip中并没有分模块，这也是js中的一大缺陷。而模块的使用就用到了export这个关键字。

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

导出方式就是这样，方法名称是根据你保存的key的值而定的。
在load方法中我们进行了回调，传递一个函数作为参数，将结果通过函数回调，方便我们的调用。
使用：
初始化：MySorage._getStorage();
global.storage = storage;

存值：
var user = new Object();
user.from = “我来自中国”;
user.userid = “我的id是”;
user.token = “我的token”;
MySorage._sava(“user3”,user);

取值：
MySorage._load(“user3”,function(data){
console.log(“—–data—–”,data);
});
通过简单的封装，是不是用起来也简单多了，但是还是有很多地方需要改进，我只是根据demo简单写了下，欢迎交流！！

ReactNative进阶之react-native-storage的使用及封装

猜你喜欢