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简单写了下，欢迎交流！！