1. 程式人生 > >AsyncStorage 和 react-native-storage 簡單封裝

AsyncStorage 和 react-native-storage 簡單封裝

AsyncStorage是一個簡單的、非同步的、持久化的Key-Value儲存系統,它對於App來說是全域性性的,具體詳細api可檢視連結,點選檢視詳細內容,本文主要是基於AsyncStorage 和 github(react-native-storage),做了一層簡單的封裝,使用起來相對來說更加方便一些;

具體檔案內容如下:

import Storage from 'react-native-storage'
import { AsyncStorage } from 'react-native'

var storage = new Storage({
    // 最大容量,預設值1000條資料迴圈儲存
    size: 1000,

    // 儲存引擎:對於RN使用AsyncStorage,對於web使用window.localStorage
    // 如果不指定則資料只會儲存在記憶體中,重啟後即丟失
    storageBackend: AsyncStorage,

    // 資料過期時間,預設一整天(1000 * 3600 * 24 毫秒),設為null則永不過期
    defaultExpires: 1000 * 3600 * 24,

    // 讀寫時在記憶體中快取資料。預設啟用。
    enableCache: true,

    // 如果storage中沒有相應資料,或資料已過期,
    // 則會呼叫相應的sync方法,無縫返回最新資料。
    // sync方法的具體說明會在後文提到
    // 你可以在建構函式這裡就寫好sync的方法
    // 或是在任何時候,直接對storage.sync進行賦值修改
    // 或是寫到另一個檔案裡,這裡require引入
    /* sync: require('你可以另外寫一個檔案專門處理sync')*/

})


var local = {
    /**
     * 設定快取
     * @params key  必傳 唯一標識
     * @params data  資料  type:string || object
     * @params expires 過期時間  不傳預設永久  單位:ms
     * @params id  非必傳 標識
     *
     * */
   set(key,data,expires,id){
        let setValue = JSON.stringify(data)
        if(id){
            storage.save({
                key:key,
                id:id,
                data:setValue,
                expires:expires ? expires:null
            })
        }else{
            storage.save({
                key:key,
                data:setValue,
                expires:expires ? expires:null
            })
        }

    },
    /**
     * 根據key 或者 key-id的到資料
     * @params key 必傳
     * @params id  可為空
     *
     * */
    get(key,id){
        if(id){
            return storage.load({
                key:key,
                id:id
            }).then(ret =>{
                return JSON.parse(ret);
            }).catch(err => {
                /**
                 * 丟擲錯誤
                 * 註釋部分為丟擲詳細錯誤
                 * */
                throw err;
               /* switch (err.name) {
                    case 'NotFoundError':
                        throw err.message;
                        break;
                    case 'ExpiredError':
                        throw err.message;
                        break;
                    default:throw '未知錯誤'
                        break;
                }*/
            } )
        }else{
            return storage.load({
                key:key
            }).then(ret =>{
                return  JSON.parse(ret);
            }).catch(err => {
                /**
                 * 丟擲錯誤
                 * 註釋部分為丟擲詳細錯誤
                 * */
                throw err;
                /* switch (err.name) {
                     case 'NotFoundError':
                         throw err.message;
                         break;
                     case 'ExpiredError':
                         throw err.message;
                         break;
                     default:throw '未知錯誤'
                         break;
                 }*/
            })
        }

    },
        /**
         * 刪除單個數據
         * key 必傳
         * @params key 刪除kay所對應的資料,必傳
         *
         * @params id  刪除id對應的資料 若刪除的資料中有id,則必傳
         */

    remove(key,id){
        if(id){
            storage.remove({
                key:key,
                id:id
            })
        }else{
            storage.remove({
                key:key
            })
        }
    },
    /**
     * 清空所有map,移除所有key-id資料(但會保留只有key的資料)
     * 測試 重新整理之後有效,所以應該是在退出app時執行的
     * */
    clearMaps(){
        storage.clearMap();
    },
    /**
     * 清空某個key下的所有資料(僅key-id資料)
     * @paramas key
     * */
    clearMapForKey(key){
         storage.clearMapForKey(key)
    },
    /**
     * 獲取key下的 所有資料(僅key-id資料)
     * */
    getAllDataForKey(key){
        return storage.getAllDataForKey(key).then(ret => {
            return ret
        })
    },
    /**
     * 獲取某個key下的所有ID(僅key-id資料)
     * */
    getIdsForKey(key){
        return storage.getIdsForKey(key).then(ids => {
            return ids;
        })
    }
}



module.exports = local

定義該檔名為storage.js,

舉例說明使用方式:

在使用快取的頁面將storage.js引入

例:import local from 'storage所在檔案目錄/storage' ,具體引入方式說明不再陳述,不瞭解的可以查一些文件或者看阮一峰ES6

下面通過 設定快取 和 獲取快取 簡單說一下使用方式

1、設定快取 引數說明

/**
 * 設定快取
 * @params key  必傳 唯一標識
 * @params data  資料  type:string || object
 * @params expires 過期時間  不傳預設永久  單位:ms
 * @params id  非必傳 標識
* * */

運用:   local.set(key,data,expires,id);

2、讀取快取 引數說明

/**
 * 根據key 或者 key-id的到資料
 * @params key 必傳
 * @params id  可為空
 *
 * */

運用:     local.get(key,id).then(ret => {

                   console.log(ret)  //獲取快取結果

               }).catch(err => {

                   console.log(err) //丟擲的錯誤

               })

其他使用說明不在一一介紹,原理大概相通。