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

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的缓存类,并提供构造函数,方便接收传入的参数。

 /**
  * 数据缓存类
  */
 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);
 }
 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则是清除数据

 loginRemember.clear();//清除指定的key的数据

下一章->待定