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的数据
