本篇部落格將帶大家展開reactnative中關於資料持久化儲存的學習。其中涉及到了nodejs的語法的相關知識，也稍做介紹。好了，廢話不多說。在androind中資料的持久化儲存用的比較多的就是shareperferce，通過shareperferce會在手機建立一個xml檔案，其中資料就是已key-value的鍵值對儲存的。reactnative方式也是相似的，不過他的儲存資料結構是json串。下面看一下官網的截圖。

關於AsyncStorage的介紹大體瀏覽一遍就可以了。重點看紅字部分。推薦有使用react-native-storage模組。 有人問，為什麼使用這個模組？ 人家不是說了嗎？提供了更多便利的功能。本文也是主要講解react-native-storage模組的使用和封裝。

react-native-storage的使用也很簡單，按照步驟來就可以了。

第二步：執行命令，下載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簡單寫了下，歡迎交流！！