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