web-storage-cache离线缓存技术的详细讲解与使用

一：web-storage-cache的优势

WebStorageCache 是一个对原生 Web Storage API（localStorage/sessionStorage）的增强封装库，主要提供以下优势：

1. 智能过期管理（核心优势）
   原生问题: 存储的数据永久有效（除非手动清除）。
   WebStorageCache: 可以设置超时时间。
2. 自动转换数据类型
   原生问题: 只能存储字符串，需手动 JSON 序列化/反序列化。
   WebStorageCache: 可以自动处理对象/数组等复杂类型，支持所有可 JSON 序列化的数据类型。
3. 多级缓存策略
   高频读取数据优先从内存获取，通过分层缓存设计显著提升了数据访问效率。
4. 支持延长有效期和修改数据
   可以延长缓存有效期、可进行条件替换。
5. 自动垃圾回收
   可以设置自动清理过期数据（默认读取时检查），也可以手动清理。

二：基础使用

上述讲解了web-storage-cache的优势，下面将结合以上优势进行使用演示：

1. 安装web-storage-cache

npm i --save web-storage-cache

2. 基础使用

以下以localStorage缓存为例

// 引入web-storage-cache
import webStorageCache from 'web-storage-cache'// 创建webStorageCache实例，默认使用的localStorage缓存
const wsCache = new webStorageCache()// 设置缓存
wsCache.set('userInfo', { name: '张三', age: '18' })// 获取缓存
wsCache.get('userInfo') // 删除缓存
wsCache.delete('userInfo') // 设置超时时间为1秒(注意：exp的单位是秒，不是毫秒)
wsCache.set('name', '李四',{exp:1})// 更新超时时间2秒
wsCache.touch('name',2)// 添加缓存，仅在不存在或者超时时插入
wsCache.add('name', '李白')// 替换缓存，仅在存在且未超时时更新值
wsCache.replace('name', '王维',{exp:1})// 删除所有已过期缓存
wsCache.deleteAllExpires()// 清空所有缓存
wsCache.clear()

3. 拓展——sessionStorage
   上述案例默认是使用的localStorage缓存，若需使用sessionStorage缓存，则需要在webStorageCache实例中配置storage值，其它使用方法同上。

// 创建webStorageCache实例
const wsCache = new webStorageCache({//storage可设置为localStorage和sessionStoragestorage:'sessionStorage', // 其它可选配置项，例如：exp: 3 // 默认过期时间（秒）
})

三：项目实战基础使用示例

以下以vue3+ts项目为例：

1. 创建useCache.ts文件，封装web-storage-cache

// 引入webStorageCache
import webStorageCache from 'web-storage-cache'
// 声明cacheType自定义类型
type cacheType = 'localStorage' | 'sessionStorage'
// 封装useCache函数
const useCache=(typeValue:cacheType='localStorage')=>{// 创建webStorageCache实例const wsCache: webStorageCache = new webStorageCache({storage:typeValue,exp: 60 * 60 * 24,//设置超时时间为24小时})return wsCache
}
export default useCache

2.在相应页面引入并使用

<script setup lang="ts">// 引入封装的useCacheimport useCache from '../hooks/useCache'// 使用localStorage缓存const wsCacheLocal = useCache()wsCacheLocal.set('token', '123456')wsCacheLocal.touch('token', 1000)wsCacheLocal.replace('token', '888888')console.log(wsCacheLocal.get('token'));wsCacheLocal.delete('token')// 使用sessionStorage缓存const wsCacheSession = useCache('sessionStorage')wsCacheSession.set('name', '李四', { exp: 1 })console.log(wsCacheSession.get('name'));wsCacheSession.deleteAllExpires()wsCacheSession.clear()
</script>