详细分析WebStorageCache 基本知识

1. 基本知识

相关的源码如下：web-storage-cache

WebStorageCache 是一个用于扩展 HTML5 的 localStorage 和 sessionStorage 的库，增加了超时时间管理和序列化功能。它可以存储 JSON 对象，并且在存储数据时可以方便地设置超时时间。这个库还能够自动清除过期数据，避免了数据的累积

相关的源码如下：

declare module 'web-storage-cache' {
  class WebStorageCache {
    /**
     * WebStorageCache 对 HTML5 `localStorage` 和 `sessionStorage` 进行了扩展，添加了超时时间，序列化方法。可以直接存储 json 对象，同时可以非常简单的进行超时时间的设置。
     * **优化**：WebStorageCache 自动清除访问的过期数据，避免了过期数据的累积。另外也提供了清除全部过期数据的方法：`wsCache.deleteAllExpires()`
     */
    constructor(options?: Partial<WebStorageCacheConstructorOptions>)

    /**
     * 检查当前选择作为缓存的storage是否被用户浏览器支持。 如果不支持调用WebStorageCache API提供的方法将什么都不做。
     */
    static isSupported(): boolean

    /**
     * 往缓存中插入数据。
     * @param key
     * @param value 支持所以可以JSON.parse 的类型。注：当为undefined的时候会执行 delete(key)操作。
     * @param options
     */
    set(key: string, value: any, options?: Partial<WebStorageCacheOptions>): void

    /**
     * 根据key获取缓存中未超时数据。返回相应类型String、Boolean、PlainObject、Array的值。
     */
    get(key: string): any

    /**
     * 根据key删除缓存中的值
     */
    delete(key: string): void

    /**
     * 删除缓存中所有通过WebStorageCache存储的超时值
     */
    deleteAllExpires(): void

    /**
     * 清空缓存中全部的值
     * 注意：这个方法会清除不是使用WebStorageCache插入的值。推荐使用:deleteAllExpires
     */
    clear(): void

    /**
     * 根据key为已存在的（未超时的）缓存值以当前时间为基准设置新的超时时间。
     * @param key
     * @param exp 单位：秒 js对象包含exp属性（以当前时间为起点的新的超时时间）
     */
    touch(key: string, exp: number): void

    /**
     * 根据key做插入操作，如果key对应的值不存在或者已超时则插入该值，反之什么都不做。
     * 注：不是通过WebStorageCache插入的值也会当作失效的值，依然执行add操作
     *
     * @param key
     * @param value
     * @param options
     */
    add(key: string, value: any, options?: Partial<WebStorageCacheOptions>): void

    /**
     * 根据key做插入操作，如果key对应的值存在并且未超时则插入该值，反之什么都不做
     * 注：超时时间以当前时间为基准重新设置
     *
     * @param key
     * @param value
     * @param options
     */
    replace(key: string, value: any, options?: Partial<WebStorageCacheOptions>): void
  }

  interface WebStorageCacheOptions {
    /**
     * 超时时间，秒。
     * 默认无限大。
     */
    exp: number

    /**
     * 为true时：当超过最大容量导致无法继续插入数据操作时，先清空缓存中已超时的内容后再尝试插入数据操作。
     * 默认为true。
     */
    force: boolean
  }

  interface WebStorageCacheConstructorOptions {
    /**
     * 'localStorage', 'sessionStorage', window.localStorage, window.sessionStorage 或者其他实现了 [Storage API] 的storage实例
     * 默认 'localStorage'
     */
    storage: 'localStorage' | 'sessionStorage' | Storage
    /**
     * 公共超时事件设置 默认无限大
     */
    exp: number
  }

  export = WebStorageCache
}

对应的各个API接口使用如下：

方法/属性	描述
constructor(options)	创建 WebStorageCache 实例，可选配置
static isSupported()	检查浏览器是否支持当前选择的存储类型（localStorage 或 sessionStorage）
set(key, value, options)	向缓存中插入数据。若 value 为 undefined，则执行删除操作
get(key)	根据 key 获取未超时的缓存数据，返回相应的值（可以是 String、Boolean、PlainObject 或 Array）
delete(key)	根据 key 删除缓存中的值
deleteAllExpires()	删除缓存中所有过期的值
clear()	清空缓存中所有值，包括非通过 WebStorageCache 插入的值
touch(key, exp)	为已存在的缓存值设置新的超时时间（以当前时间为基准）
add(key, value, options)	如果 key 对应的值不存在或已超时，则插入该值
replace(key, value, options)	如果 key 对应的值存在且未超时，则更新该值的超时时间并重新插入

选项	描述
storage	指定使用的存储类型，默认为 ‘localStorage’。可选值为 ‘localStorage’、‘sessionStorage’ 或任何实现了 [Storage API] 的实例
exp	公共超时时间设置，默认为无限大

2. Demo

基本的Demo使用如下：

// 引入 WebStorageCache
const WebStorageCache = require('web-storage-cache');

// 创建 WebStorageCache 实例，使用 localStorage
const wsCache = new WebStorageCache({
  storage: 'localStorage',
  exp: 3600 // 设置默认超时时间为1小时
});

// 设置缓存
wsCache.set('user', { name: '张三', age: 25 }, { exp: 600 }); // 设置超时时间为10分钟

// 获取缓存
const user = wsCache.get('user');
console.log(user); // 输出: { name: '张三', age: 25 }

// 更新缓存的超时时间
wsCache.touch('user', 1200); // 将超时时间更新为20分钟

// 添加缓存，仅在键不存在或超时时插入
wsCache.add('settings', { theme: 'dark' });

// 替换缓存，仅在键存在且未超时时更新值
wsCache.replace('settings', { theme: 'light' });

// 删除缓存
wsCache.delete('user');

// 删除所有过期数据
wsCache.deleteAllExpires();

// 清空所有缓存
wsCache.clear();

实战中的配置可以如下：

/**
 * 配置浏览器本地存储的方式，可直接存储对象数组。
 */

import WebStorageCache from 'web-storage-cache'

type CacheType = 'localStorage' | 'sessionStorage'

export const CACHE_KEY = {
  // 用户相关
  ROLE_ROUTERS: 'roleRouters',
  USER: 'user',
  // 系统设置
  IS_DARK: 'isDark',
  LANG: 'lang',
  THEME: 'theme',
  LAYOUT: 'layout',
  DICT_CACHE: 'dictCache',
  // 登录表单
  LoginForm: 'loginForm',
  TenantId: 'tenantId'
}

export const useCache = (type: CacheType = 'localStorage') => {
  const wsCache: WebStorageCache = new WebStorageCache({
    storage: type
  })

  return {
    wsCache
  }
}

export const deleteUserCache = () => {
  const { wsCache } = useCache()
  wsCache.delete(CACHE_KEY.USER)
  wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
  // 注意，不要清理 LoginForm 登录表单
}