uni-app,vue,react,Trao之缓存类封装
jackson影琪 人气:2uni-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的数据
下一章->待定
加载全部内容