uni-app,vue,react,Trao之缓存类封装

当不公发生在谁身上 發表於 2020-1-18 10:42:00

<h1 style="text-align: center">uni-app,vue,react,Trao之缓存类封装</h1>
<h2>一,介绍与需求</h2>
<h3>1.1,介绍</h3>
缓存主要分为如下几个
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缓存介绍，不同端的缓存可以参照相应的文档,这儿主要介绍通用类的缓存封装介绍。
<h3>1.2,需求</h3>
1,记录用户登录成功的信息,比如token等,
2,减少接口请求的次数，
3,记住密码,方便下次登录。
<h2>二,封装缓存类</h2>
第一步:新建类
新建一个叫Storage的缓存类,并提供构造函数,方便接收传入的参数。
<div class="cnblogs_code" style="margin-left: 30px">
<pre> 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 }</pre>
</div>
第二步:保存数据到本地
在上面类中添加保存数据到本地的方法,并提交有效期，如下:
<div class="cnblogs_code" style="margin-left: 30px">
<pre> 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 }</pre>
</div>
第三步:获取数据
<div class="cnblogs_code" style="margin-left: 30px">
<pre> 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 }</pre>
</div>
以上两步是主要的缓存类常用的方法,存取操作,下面两部将介绍删除方法
第四步:删除数据
根据指定的key值,删除指定的缓存数据
<div class="cnblogs_code" style="margin-left: 30px">
<pre>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 }</pre>
</div>
第五步:清空所有缓存数据
<div class="cnblogs_code" style="margin-left: 30px">
<pre>1 /**
2 * 清空数据
3 */
4 clear() {
5 const { __storage, __appKey } = this;
6 Object.keys(__storage).forEach(k => k.indexOf(__appKey) === 0 && __storage.removeStorageSync(k));
7 }</pre>
</div>
第六步:完整代码storage.js
<div class="cnblogs_code" style="margin-left: 30px">
<pre>/**
*数据缓存类
* @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));
}
}</pre>
</div>
<h2>三,缓存类调用</h2>
常用有效期时间定义,可根据需求自动选择
<div class="cnblogs_code">
<pre>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;</pre>
</div>
<h3>3.1,web端调用(react,vue)</h3>
在web端调用封装的类
<div class="cnblogs_code">
<pre>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);</pre>
</div>
比如记住密码使用localCache;sessionCache的使用与localCache类似,WEEK设置记住用户密码的有效期为一周
<div class="cnblogs_code">
<pre> 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 };</pre>
</div>
<h3>3.2,uni-app调用(vue)</h3>
在uni-app中调用封装的类
<div class="cnblogs_code">
<pre>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);</pre>
</div>
比如记住登陆的token
<div class="cnblogs_code">
<pre> 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 };</pre>
</div>
<h3>3.3,Taro调用(类react)</h3>
taro的使用与uni-app类似
<div class="cnblogs_code">
<pre>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);</pre>
</div>
比如记住用户密码多久
<div class="cnblogs_code">
<pre> 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 };</pre>
</div>
以上缓存方法的调用皆是传参并且有效,表示是存储数据,否则是获取缓存的数据;调用clear则是清除数据
<div class="cnblogs_code">
<pre>1 loginRemember.clear();//清除指定的key的数据</pre>
</div>
<h3>下一章->待定</h3> 
来源：https://www.cnblogs.com/jackson-yqj/p/11812543.html

頁: [1]

琼殿技术论坛's Archiver

uni-app,vue,react,Trao之缓存类封装