一,介绍与需求
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的缓存类,并提供构造函数,方便接收传入的参数。
/** * 数据缓存类 */ 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; }
以上两步是主要的缓存类常用的方法,存取操作,下面两部将介绍删除方法
第四步:删除数据
根据指定的key值,删除指定的缓存数据
/** * 删除存储的数据 * @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)); }
第六步:完整代码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)); } }
三,缓存类调用
常用有效期时间定义,可根据需求自动选择
export const MINUTES: number = 60000; export const HOURS: number = 60 * MINUTES; export const DAY: number = 24 * HOURS; export const WEEK: number = 7 * DAY; export const MONTH: number = 30 * DAY;
3.1,web端调用(react,vue)
在web端调用封装的类
import Storage from '../utils/storage'; export const localCache = new Storage('jackson', window.localStorage); export const sessionCache = new Storage('jackson', window.sessionStorage); 比如记住密码使用localCache;sessionCache的使用与localCache类似,WEEK设置记住用户密码的有效期为一周 import { localCache, WEEK } from './index'; const KEY = 'loginRemember'; export default function cache(loginRemember) {//有参数 并且是有效的 则是存储,否则是获取 return loginRemember ? localCache.setItem(KEY, loginRemember, WEEK) : localCache.getItem(KEY); } cache.clear = function () { localCache.removeItem(KEY); };
3.2,uni-app调用(vue)
在uni-app中调用封装的类
import Storage from '../utils/storage'; const UniStorage: object = { setStorageSync: uni.setStorageSync, getStorageSync: uni.getStorageSync, removeStorageSync: uni.removeStorageSync, } export const StorageSync: object = new Storage('jackson', UniStorage); 比如记住登陆的token import { StorageSync, MINUTES } from './index'; const KEY: string = 'setToken'; export default function cache(setToken: any) { return setToken ? (StorageSync as any).setStorageSync(KEY, setToken, MINUTES) : (StorageSync as any).getStorageSync(KEY); 7 } cache.clear = function () { (StorageSync as any).removeStorageSync(KEY); };
3.3,Taro调用(类react)
taro的使用与uni-app类似
import Taro from '@tarojs/taro'; import Storage from '../utils/storage'; const TaroStorage: object = { setStorageSync: Taro.setStorageSync, getStorageSync: Taro.getStorageSync, removeStorageSync: Taro.removeStorageSync, } export const StorageSync: object = new Storage('jackson', TaroStorage); 比如记住用户密码多久 import { StorageSync, MINUTES } from './index'; const KEY: string = 'loginRemember'; export default function cache(loginRemember: any) { return loginRemember ? (StorageSync as any).setStorageSync(KEY, loginRemember, MINUTES) : (StorageSync as any).getStorageSync(KEY); } cache.clear = function () { (StorageSync as any).removeStorageSync(KEY); };
以上缓存方法的调用皆是传参并且有效,表示是存储数据,否则是获取缓存的数据;调用clear则是清除数据
1 loginRemember.clear();//清除指定的key的数据