uni-app,vue,react,Trao之緩存類封裝

一,介紹與需求

1.1,介紹

緩存主要分為如下幾個

1、LocalStorage

        LocalStorage是永久性的本地緩存，存儲在客戶端的瀏覽器上，除非主動刪除，是不會過期的。LocalStorage采用的是鍵值對的方式進行存儲，存儲方式只能是字符串。存儲內容可以用圖片、json、樣式、腳本等。

        API基本使用方法：

         1.1、localStorage.setItem() 存儲

         1.2、localStorage.getItem() 獲取數據，其中使用localStorage.valueOf()獲取全部數據

         1.3、localStorage.removeItem(key) 刪除數據

         1.4、localStorage.clear()清空全部數據，localStorage.length 獲取本地存儲數據數量

         1.5、localStorage.key(N)獲取第N個數據的key鍵值

 2、SessionSotrage

       SessionStorage用於本地存儲一個會話中的數據，這些數據只有在同一個會話中的頁面才能訪問並且會話結束，窗口關閉后，數據就會消失。是一種會話級別的存儲。

       SessionStorage與localStorage 的使用方法相似

 3、cookie

       cookie與sessionStorage、localStorage還是有很大不同的。

        3.1、cookie數據始終在同源的http請求中攜帶，cookie在瀏覽器和服務器端來回傳遞，而localstorage和sessionstorage不會自動把數據傳送給服務器端，僅在本地保存。

        3.2、存儲大小限制不同，cookie的存儲數據大小要求不能超過4k,每次的http請求都會攜帶cookie,所以保存的數據需要比較小。sessionstorage和localstorage存儲數據大小限制比cookie要大，可以達到5M或者更大，不同瀏覽器設置可能不同。

        3.3、數據生命周期。cookie的生命周期一般在其設置的過期時間之前有效。而sessionstorage僅在關閉窗口前有效，localstorage持久有效，直到手動刪除。

        3.4、作用域不同，sessionstorage不在不同瀏覽器中共享，即使是同一頁面也不支持。而localstorage在所有同源窗口中都是共享的，同樣，cookie在所有同源窗口中也是可以共享的。

        3.5、cookie的數據還有路徑的概念，可以通過設置限制cookie只屬於某個路徑

        3.6、webstorage 支持事件通知機制，可以將數據更新的通知發送給監聽者。

  4、離線存儲

         通過創建cache mainfest文件，創建應用緩存

對瀏覽器來說，使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀，而且容量更大，它包含兩種：localStorage 和 sessionStorage主要有以下一些優點：

         1、減少網絡流量：使用webstorage將數據保存在本地中，減少不必要的請求。

         2、快速顯示數據：從本地獲取數據比通過網絡從服務器獲取數據效率更高，因此網頁顯示也比較快；

         3、臨時存儲：很多時候數據只需在用戶瀏覽一組頁面期間使用，關閉窗口后數據就會丟失，使用sessionstorage 比較方便；

         4、不影響網絡效能：因為webstorage只作用在客戶端的瀏覽器，不會占用頻寬。

uni-app緩存介紹，Trao緩存介紹，不同端的緩存可以參照相應的文檔,這兒主要介紹通用類的緩存封裝介紹。

1.2,需求

1,記錄用戶登錄成功的信息,比如token等,

2,減少接口請求的次數，

3,記住密碼,方便下次登錄。

二,封裝緩存類

第一步:新建類

新建一個叫Storage的緩存類,並提供構造函數,方便接收傳入的參數。

/**
 * 數據緩存類
 */
export default class Storage {
    /**
     * 數據緩存類構造方法
     * @param appKey 用於存儲數據時鍵名的前綴
     * @param storage 本地存儲或會話存儲
     */
    constructor(appKey, storage) {
        this.__storage = storage || localStorage;
        this.__appKey = appKey ? appKey + '-' : '';
    }
}

第二步:保存數據到本地

在上面類中添加保存數據到本地的方法,並提交有效期，如下:

/**
     * 存儲數據
     * @param key   鍵名
     * @param v     鍵值
     * @param expire  有效期， ms 單位
     * @param merge 新舊數據是否合並
     */
    setStorageSync(key, v, expire, merge) {
        const { __storage, __appKey } = this;
        var str = merge ? { v: { ...{ v: this.getStorageSync(key) }, ...{ v } } } : { v: { v } };
        if (expire) {
            str.t = Date.now() + expire;
        }
        __storage.setStorageSync(__appKey + key.toString(), JSON.stringify(str));
    }

第三步:獲取數據

  /**
     * 獲取數據
     * @param key   鍵名
     * @returns     返回鍵值， 如果過期則為空
     */
    getStorageSync(key) {
        const { __storage, __appKey } = this;
        const k = __appKey + key.toString();
        var obj = __storage.getStorageSync(k) ? JSON.parse(__storage.getStorageSync(k)) : undefined;
        if (obj && obj.t && obj.t < Date.now()) {
            __storage.removeStorageSync(k);
            return;
        }
        return obj && obj.v && obj.v.v;
    }

以上兩步是主要的緩存類常用的方法,存取操作,下面兩部將介紹刪除方法

第四步:刪除數據

根據指定的key值,刪除指定的緩存數據

    /**
     * 刪除存儲的數據
     * @param key
     */
    removeStorageSync(key) {
        const { __storage, __appKey } = this;
        const k = __appKey + key.toString();
        __storage.removeStorageSync(k);
    }

第五步:清空所有緩存數據

  /**
     * 清空數據
     */
    clear() {
        const { __storage, __appKey } = this;
        Object.keys(__storage).forEach(k => k.indexOf(__appKey) === 0 && __storage.removeStorageSync(k));
    }

第六步:完整代碼storage.js

/**
 *  數據緩存類
 * @author jackson影琪
 * @date 2019-11-07
 * @param appKey 用於存儲數據時鍵名的前綴
 * @param storage 本地存儲或會話存儲
 **/
export default class Storage {
    /**
     * 數據緩存類構造方法
     * @param appKey 用於存儲數據時鍵名的前綴
     * @param storage 本地存儲或會話存儲
     */
    constructor(appKey, storage) {
        this.__storage = storage || localStorage;
        this.__appKey = appKey ? appKey + '-' : '';
    }

    /**
     * 存儲數據
     * @param key   鍵名
     * @param v     鍵值
     * @param expire  有效期， ms 單位
     * @param merge 新舊數據是否合並
     */
    setStorageSync(key, v, expire, merge) {
        const { __storage, __appKey } = this;
        var str = merge ? { v: { ...{ v: this.getStorageSync(key) }, ...{ v } } } : { v: { v } };
        if (expire) {
            str.t = Date.now() + expire;
        }
        __storage.setStorageSync(__appKey + key.toString(), JSON.stringify(str));
    }

    /**
     * 獲取數據
     * @param key   鍵名
     * @returns     返回鍵值， 如果過期則為空
     */
    getStorageSync(key) {
        const { __storage, __appKey } = this;
        const k = __appKey + key.toString();
        var obj = __storage.getStorageSync(k) ? JSON.parse(__storage.getStorageSync(k)) : undefined;
        if (obj && obj.t && obj.t < Date.now()) {
            __storage.removeStorageSync(k);
            return;
        }
        return obj && obj.v && obj.v.v;
    }

    /**
     * 刪除存儲的數據
     * @param key
     */
    removeStorageSync(key) {
        const { __storage, __appKey } = this;
        const k = __appKey + key.toString();
        __storage.removeStorageSync(k);
    }

    /**
     * 清空數據
     */
    clear() {
        const { __storage, __appKey } = this;
        Object.keys(__storage).forEach(k => k.indexOf(__appKey) === 0 && __storage.removeStorageSync(k));
    }
}

三,緩存類調用

常用有效期時間定義,可根據需求自動選擇

export const MINUTES: number = 60000;
export const HOURS: number = 60 * MINUTES;
export const DAY: number = 24 * HOURS;
export const WEEK: number = 7 * DAY;
export const MONTH: number = 30 * DAY;

3.1,web端調用(react,vue)

在web端調用封裝的類

import Storage from '../utils/storage';

export const localCache = new Storage('jackson', window.localStorage);
export const sessionCache = new Storage('jackson', window.sessionStorage);

比如記住密碼使用localCache;sessionCache的使用與localCache類似,WEEK設置記住用戶密碼的有效期為一周

import { localCache, WEEK } from './index';

const KEY = 'loginRemember';

export default function cache(loginRemember) {//有參數 並且是有效的 則是存儲，否則是獲取
  return loginRemember ? localCache.setItem(KEY, loginRemember, WEEK) : localCache.getItem(KEY);
}
cache.clear = function () {
  localCache.removeItem(KEY);
};

3.2,uni-app調用(vue)

在uni-app中調用封裝的類

import Storage from '../utils/storage';

const UniStorage: object = {
    setStorageSync: uni.setStorageSync,
    getStorageSync: uni.getStorageSync,
    removeStorageSync: uni.removeStorageSync,
}
export const StorageSync: object = new Storage('jackson', UniStorage);

比如記住登陸的token

import { StorageSync, MINUTES } from './index';

const KEY: string = 'setToken';

export default function cache(setToken: any) {
    return setToken ? (StorageSync as any).setStorageSync(KEY, setToken, MINUTES) : (StorageSync as any).getStorageSync(KEY);
}
cache.clear = function () {
    (StorageSync as any).removeStorageSync(KEY);
};

3.3,Taro調用(類react)

taro的使用與uni-app類似

import Taro from '@tarojs/taro';
import Storage from '../utils/storage';

const TaroStorage: object = {
    setStorageSync: Taro.setStorageSync,
    getStorageSync: Taro.getStorageSync,
    removeStorageSync: Taro.removeStorageSync,
}
export const StorageSync: object = new Storage('jackson', TaroStorage);

比如記住用戶密碼多久

import { StorageSync, MINUTES } from './index';

const KEY: string = 'loginRemember';

export default function cache(loginRemember: any) {
  return loginRemember ? (StorageSync as any).setStorageSync(KEY, loginRemember, MINUTES) : (StorageSync as any).getStorageSync(KEY);
}
cache.clear = function () {
  (StorageSync as any).removeStorageSync(KEY);
};

以上緩存方法的調用皆是傳參並且有效,表示是存儲數據,否則是獲取緩存的數據;調用clear則是清除數據

loginRemember.clear();//清除指定的key的數據

下一章->待定