一, 介绍与需求
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', Windows.localStorage);
- export const sessionCache = new Storage('jackson', Windows.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);
- }
- 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 的数据
下一章 -> 待定
来源: https://www.cnblogs.com/jackson-yqj/p/11812543.html