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

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

一,介紹與需求

1.1,介紹

緩存主要分爲以下幾個

一、LocalStorage

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

        API基本使用方法：

         1.一、localStorage.setItem() 存儲

         1.二、localStorage.getItem() 獲取數據，其中使用localStorage.valueOf()獲取所有數據

         1.三、localStorage.removeItem(key) 刪除數據

         1.四、localStorage.clear()清空所有數據，localStorage.length 獲取本地存儲數據數量

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

 二、SessionSotrage

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

       SessionStorage與localStorage 的使用方法類似

 三、cookie

       cookie與sessionStorage、localStorage仍是有很大不一樣的。

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

        3.二、存儲大小限制不一樣，cookie的存儲數據大小要求不能超過4k,每次的http請求都會攜帶cookie,因此保存的數據須要比較小。sessionstorage和localstorage存儲數據大小限制比cookie要大，能夠達到5M或者更大，不一樣瀏覽器設置可能不一樣。

        3.三、數據生命週期。cookie的生命週期通常在其設置的過時時間以前有效。而sessionstorage僅在關閉窗口前有效，localstorage持久有效，直到手動刪除。

        3.四、做用域不一樣，sessionstorage不在不一樣瀏覽器中共享，即便是同一頁面也不支持。而localstorage在全部同源窗口中都是共享的，一樣，cookie在全部同源窗口中也是能夠共享的。

        3.五、cookie的數據還有路徑的概念，能夠經過設置限制cookie只屬於某個路徑

        3.六、webstorage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。

  四、離線存儲

         經過建立cache mainfest文件，建立應用緩存

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

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

         二、快速顯示數據：從本地獲取數據比經過網絡從服務器獲取數據效率更高，所以網頁顯示也比較快；

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

         四、不影響網絡效能：由於webstorage只做用在客戶端的瀏覽器，不會佔用頻寬。

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

1.2,需求

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

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

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

二,封裝緩存類

第一步:新建類

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

 1 /**  2  * 數據緩存類  3  */
 4 export default class Storage {  5     /**  6  * 數據緩存類構造方法  7  * @param appKey 用於存儲數據時鍵名的前綴  8  * @param storage 本地存儲或會話存儲  9      */
10  constructor(appKey, storage) { 11         this.__storage = storage || localStorage; 12         this.__appKey = appKey ? appKey + '-' : ''; 13  } 14 }

第二步:保存數據到本地

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

 1 /**  2  * 存儲數據  3  * @param key 鍵名  4  * @param v 鍵值  5  * @param expire 有效期， ms 單位  6  * @param merge 新舊數據是否合併  7      */
 8  setStorageSync(key, v, expire, merge) {  9         const { __storage, __appKey } = this; 10         var str = merge ? { v: { ...{ v: this.getStorageSync(key) }, ...{ v } } } : { v: { v } }; 11         if (expire) { 12             str.t = Date.now() + expire; 13  } 14         __storage.setStorageSync(__appKey + key.toString(), JSON.stringify(str)); 15     }

第三步:獲取數據

 1   /**  2  * 獲取數據  3  * @param key 鍵名  4  * @returns 返回鍵值， 若是過時則爲空  5      */
 6  getStorageSync(key) {  7         const { __storage, __appKey } = this;  8         const k = __appKey + key.toString();  9         var obj = __storage.getStorageSync(k) ? JSON.parse(__storage.getStorageSync(k)) : undefined; 10         if (obj && obj.t && obj.t < Date.now()) { 11  __storage.removeStorageSync(k); 12             return; 13  } 14         return obj && obj.v && obj.v.v; 15     }

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

第四步:刪除數據

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

1     /** 2  * 刪除存儲的數據 3  * @param key 4      */
5  removeStorageSync(key) { 6         const { __storage, __appKey } = this; 7         const k = __appKey + key.toString(); 8  __storage.removeStorageSync(k); 9     }

第五步:清空全部緩存數據

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

第六步:完整代碼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)); } }

三,緩存類調用

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

1 export const MINUTES: number = 60000; 2 export const HOURS: number = 60 * MINUTES; 3 export const DAY: number = 24 * HOURS; 4 export const WEEK: number = 7 * DAY; 5 export const MONTH: number = 30 * DAY;

3.1,web端調用(react,vue)

在web端調用封裝的類

1 import Storage from '../utils/storage'; 2 
3 export const localCache = new Storage('jackson', window.localStorage); 4 export const sessionCache = new Storage('jackson', window.sessionStorage);

好比記住密碼使用localCache;sessionCache的使用與localCache相似,WEEK設置記住用戶密碼的有效期爲一週

 1 import { localCache, WEEK } from './index';  2 
 3 const KEY = 'loginRemember';  4 
 5 export default function cache(loginRemember) {//有參數 而且是有效的 則是存儲，不然是獲取
 6   return loginRemember ? localCache.setItem(KEY, loginRemember, WEEK) : localCache.getItem(KEY);  7 }  8 cache.clear = function () {  9  localCache.removeItem(KEY); 10 };

3.2,uni-app調用(vue)

在uni-app中調用封裝的類

1 import Storage from '../utils/storage'; 2 
3 const UniStorage: object = { 4  setStorageSync: uni.setStorageSync, 5  getStorageSync: uni.getStorageSync, 6  removeStorageSync: uni.removeStorageSync, 7 } 8 export const StorageSync: object = new Storage('jackson', UniStorage);

好比記住登錄的token

 1 import { StorageSync, MINUTES } from './index';  2 
 3 const KEY: string = 'setToken';  4 
 5 export default function cache(setToken: any) {  6     return setToken ? (StorageSync as any).setStorageSync(KEY, setToken, MINUTES) : (StorageSync as any).getStorageSync(KEY);  7 }  8 cache.clear = function () {  9  (StorageSync as any).removeStorageSync(KEY); 10 };

3.3,Taro調用(類react)

taro的使用與uni-app相似

1 import Taro from '@tarojs/taro'; 2 import Storage from '../utils/storage'; 3 
4 const TaroStorage: object = { 5  setStorageSync: Taro.setStorageSync, 6  getStorageSync: Taro.getStorageSync, 7  removeStorageSync: Taro.removeStorageSync, 8 } 9 export const StorageSync: object = new Storage('jackson', TaroStorage);

好比記住用戶密碼多久

 1 import { StorageSync, MINUTES } from './index';  2 
 3 const KEY: string = 'loginRemember';  4 
 5 export default function cache(loginRemember: any) {  6   return loginRemember ? (StorageSync as any).setStorageSync(KEY, loginRemember, MINUTES) : (StorageSync as any).getStorageSync(KEY);  7 }  8 cache.clear = function () {  9  (StorageSync as any).removeStorageSync(KEY); 10 };

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

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

下一章->待定

原文出處：https://www.cnblogs.com/jackson-yqj/p/11812543.html