從零學React Native之13 持久化存儲

數據持久化就是指應用程序將某些數據存儲在手機存儲空間中。

藉助native存儲

這種方式不言而喻,就是把內容傳遞給native層,經過原生API存儲，詳見從零學React Native之05混合開發

AsyncStorage API

RN框架爲開發者提供了 AsyncStorage API，開發者能夠利用它將任意「字符串鍵值對」保存到存儲空間中。

它是簡單的，異步的。用它能夠取代Android的sharedperference和ios的NSUserDefault。

AsyncStorage存儲的數據對該RN應用全局都是能夠訪問的，只須要知道經過它增刪改查數據就能夠了。

寫入數據

開發者能夠經過靜態函數setItem來存儲數據。setItem的JavaScript原型是：

static object setItem(key, value,aCallBack)

寫入數據有好幾種方式，直接看代碼：

// 構造
    constructor(props) {
        super(props);
        this.doSomething=this.doSomething.bind(this);
    }

    doSomething(error){
        if(error!=null){   //如發生錯誤 處理
            console.log('error message:'+error.message);
            return;
        }
        // 執行保存成功的操做
        console.log("name保存成功!");
    }
    //下面4種寫法, 推薦第三種和第四種
    componentWillMount() {
        //最簡單的寫法 , 沒法檢測保存什麼時候結束,是否成功
        AsyncStorage.setItem('NO','01'); 
        console.log("NO保存成功");

        // 經過自帶的回調方法,一旦發生出錯就能夠監控到
        AsyncStorage.setItem('name','張三',this.doSomething);


        //Promise操做 ES2015推薦的寫法
        AsyncStorage.setItem('age',"18").then(
            ()=>{   //成功的操做
                console.log("age保存成功!");
            },
        );
        // 使用ES2017推薦的異步的寫法
        this.saveSex();

    }
    // 箭頭函數不須要在構造函數中bind(this)了
    saveSex = async ()=> {
        try {
           await AsyncStorage.setItem('sex','female');
            console.log("sex保存成功!");
        } catch(error) {
            console.error(error);
        }
    };

輸出結果:

固然, 還能夠經過AsyncStorage的靜態函數multiSet一次存儲多個數據。

static object multiSet(aArray, aCallback)

//參數類型
multiSet([['k1', 'val1'], ['k2', 'val2']], cb);

Promise機制還能夠經過下面的方式捕獲異常,若是不瞭解Promise能夠參考[React Native]Promise機制

AsyncStorage.multiSet([['name','李四'],["sex","male"]])
            .then(
                ()=>{
                    console.log("name,sex保存成功");
                }
            ).catch((errors)=>{
                console.log('error,length:'+errors.length);
                if(errors.length>0){  //保存操做有異常
                    console.log(errors[0].message);
                    //...
                }else{
                    //異常不是數組,有多是成功操做的處理函數拋出的異常
                    //...
                }
        });

獲取數據

能夠經過AsyncStorage類的靜態函數getItem獲取數據，JS原型是：

static object getItem(aKey,aCallback)

直接看代碼:

componentWillMount() {

        //...

        //方式一 讀取數據
        AsyncStorage.getItem("name", this.handleResult);

        //方式二
        AsyncStorage.getItem('sex')
            .then(  //使用Promise機制的方法
                (result)=> {   //使用Promise機制,若是操做成功不會有error參數
                    if (result == null) {
                        //沒有指定的key
                        return;
                    }
                    console.log("sex:" + result);
                }
            ).catch((error)=> { //讀取操做失敗 console.log('error:' + error.message); }); } handleResult(error, result) { if (error != null) { console.log('error message:' + error.message); return; } if (result == null) { //沒有指定的key return; } console.log("name:" + result); }

固然也能夠經過getAllKeys函數獲取當前存儲的全部鍵,再經過multiGet獲取全部值。兩個函數的原型分別是：

static object getAllkeys([aCallback])
static object multiGet(aArrays,aCallBack)

官方示例代碼:

AsyncStorage.getAllKeys((err, keys) => {
  AsyncStorage.multiGet(keys, (err, stores) => {
   stores.map((result, i, store) => {
     // get at each store's key/value so you can work with it
     let key = store[i][0];
     let value = store[i][1];
    });
  });
});

注意的是，AsyncStorage API存儲數據是無序的。

開發者還能夠經過AsyncStorage的靜態函數flushGetRequests取消前面的全部未執行的完成的multiGet操做。

static object flushGetRequests() 

最好也藉助Promise機制。

刪除數據

刪除數據經過 removeItem或者multiRemove 刪除。 固然還能夠經過clear函數所有清空。
函數原型：

static removeItem(key, callback?) 

static multiRemove(keys, callback?) 

static clear(callback?)

寫法和上面差很少， 就不列舉示例代碼了。

JSON對象存儲

使用AsyncStorage類保存數據，只能經過key-value形式保存一個字符串類型的數據。很難知足開發者的需求。
可是配合JSON類，把JSON格式的對象轉換爲一個字符串。而後經過AsyncStorage類的key-value形式進行保存，就能夠知足絕大多數需求了。

咱們藉助下上篇文章中[React Native] 解析JSON文件 中的json文件,經過JSON類就能夠轉化爲字符串了

let studentData = require('./data/student.json');
let newJSONString=JSON.stringify(studentData);

讀取出來的字符串也能夠轉換回JSON對象。

let jsonObject=JSON.parse(newJSONString)

須要注意的是 JSONparse函數要求嚴格,不容許有尾逗號,若是有機會拋出異常,以下:

JSON.parse('{"name":"張三" ,}');

數據庫

若是你想存放數據結構複雜的數據的時候，就須要用到數據庫,好比sqlite這種跨平臺的數據存儲方式在ReactNative裏也有對應的方式，那就是react-native-sqlite。點這裏能夠進行下載集成到應用程序中。

處理sqlite還有比較牛的就是realm，realm也支持react native了。你們能夠按照官方文檔去配置。
https://realm.io/docs/react-native/latest/

調用數據庫相對複雜了，咱們後面再詳細介紹。

更多精彩請關注微信公衆帳號likeDev