uni-app,vue,react,Trao之快取類封裝
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的快取類,並提供建構函式,方便接收傳入的引數。
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的資料