一分鐘實現，一個RN持久數據管理器

在React Native開發過程當中，總避免不了須要存儲一些數據在本地。對於大多數應用只須要存儲一些結構簡單的數據，如標記位，用戶信息等。這時候咱們首選擇的存儲方式就是AsyncStorage，那咱們先來看下AsyncStorage給我提供了哪些基本方法：react

能夠看出AsyncStorage已經包含set、get、remove、clear等一系列靜態方法，基本上已經知足了咱們對數據增、刪、改、查（CURD 下文中我都統一使用簡稱）的需求。對於AsyncStorage的使用，官網建議咱們再封裝一層，而不是直接使用AsyncStorage。git

那咱們先在網上搜索一下看看你們是怎麼封裝AsyncStorage的。經過在網上大量的搜索與對比，我把你們的封裝方式分爲三類：github

重複造輪式這種封裝方式，基本上是新建一個可導出的類，加入幾個靜態的CURD方法，而後在相應的靜態方法裏面直接調用AsyncStorage的CURD方法，其它的不作任何處理。【這種‘‘簡陋’’的封裝，還不如不封裝】sql
類型轉換式這種封裝方式，相較於重複造輪式，增長了類型轉換和異常捕獲，使得 AsyncStorage的數據存的類型再也不侷限於string，能夠保存對象、數組等結構數據類型，對於取數據的時候也作相應的轉換【基本知足開發需求，但使用不夠簡單】數據庫
過分封裝式這種封裝方式，給AsyncStorage的操做增長了不少附加的存、取可選項，經如增長Where條件查詢，保存，這種表面上看着封裝以後對AsyncStorage的操做變得更「靈活」，功能「更強大」，實則很雞肋。【畫蛇添足，爲什麼不選擇 sqlite 庫】npm

雖然AsyncStorage的底層是sqlite db實現的，並非表示咱們就得讓AsyncStorage支持sqlite的各類標準的數據庫操做，AsyncStorage被設計出來的初衷就是用於存取一些結構相對簡單的數據，若是真要操做大量、複雜的數據那就應該選擇RN的 sqlite庫去實現。react-native

經過以上這幾類方式的對比，發現第二種AsyncStorage封裝方式的是比較合適的。在使用過程當中基本也是以Key-Value的形式是存、取數據。可是若是項目中有大量的數據存、取操做時。這個Keys的維護是一個難題：數組

在訪問AsyncStorage的地方，手動寫key，如：XXX.get('userId')，這種方式缺點也很明顯，若是有大量地同一屬性的操做，得寫不少遍，所以也增長了寫錯的可能性，Coding體驗很是很差。app
定義屬性常量Key，經過常量Key去訪問屬性，如：XXX.get(Const.User_Id)，在屬性訪問比較頻繁的時候，可能這種方式比較合適。但這樣又「額外」的引入了常量集合資源，增長了項目的複雜度。設計

沒有更好的方式去訪問AsyncStorage呢？固然有，這裏就要進入咱們今天的主題了，【怎樣一分鐘實現一個AsyncStorage 訪問器】，且在使用的時候也能方便，快捷的訪問AsyncStorage數據。

第一步： 花 10 秒鐘定義一個全局可導出的數據管理對象及須要存儲的userId屬性，如：

export const RNStorage = {// 持久化數據列表
    userId: undefined, // 用戶ID
};

第二步： 再花 20 秒的時間，在程序初始化的地方引入XStorage，並調用初始化綁定RNStroage，而後你就能夠隨意的訪問RNStorage中的屬性了。

import {XStorage } from 'react-native-easy-app';
import { AsyncStorage } from 'react-native';

XStorage.initStorage(RNStorage, AsyncStorage, () => {
    // 綁定完成，如今您就能夠隨意訪問RNStorage中的任何數據了
    RNStorage.userId = '#@23DF424FGD234DKT45IU'; // 至關於AsyncStorage.setItem('userId','#@23DF424FGD234DKT45IU')
    console.log('userId=' + RNStorage.userId); // 至關於console.log(await AsyncStorage.getItem('userId'))
});

第三步：

再花10秒的時間輸入npm庫安裝命令( js庫大小不到60k ) 安裝方式（2選1）： yarn add react-native-easy-app npm install react-native-easy-app --save

剩下20秒的時間，您只須要端起咖啡等待 react-native-easy-app 庫的安裝完成。

有沒有很簡單，花了1分鐘不到的時間就構建了一個RN的AsyncStorage數據訪問管理器，今後之後，若是有任何新的數據須要保存到AsyncStorage中，只須要在RNStorage對象中定義相應的屬性字段便可。RNStorage的屬性字段對數據的類型有 string，bool，object 等各類類型的支持。總之一句話：您能夠像訪問內存對象同樣同步訪問RNStorage裏面定義的任何屬性，這些屬性會被自動同步到AsyncStorage中。

示例項目：react-native-easy-app-sample 中的 StorageController 頁面包含RNStorage的數據存、取的應用實現，你們能夠參考。

這樣文章開頭AsyncStorage的第二種封裝方式的訪問問題就迎刃而解了，或許你還不放心，也不懂RNStorage的實現原理，那你能夠看看這篇文章：

react-native-easy-app 詳解與使用之（一） AsyncStorage

若是有任何疑問，歡迎掃碼加入RN技術QQ交流羣