使用localStorage实现持久化缓存，将数据序列化为JSON字符串存储，适用于配置信息、用户偏好等不常变动的数据，提升前端性能和用户体验。
在前端开发中，JS插件常常需要处理频繁的数据请求或重复计算，直接从服务器获取数据不仅影响性能，还会增加网络负担。通过实现本地数据缓存，可以显著提升插件的响应速度和用户体验。以下是几种常见的本地数据缓存策略及其具体实现方式。
使用 localStorage 进行持久化缓存
localStorage 是浏览器提供的持久化存储机制，适合保存字符串类型的数据，且在页面关闭后依然存在。
适用于：配置信息、用户偏好、不常变动的接口数据。
- 将获取到的数据序列化为 JSON 字符串后存入 localStorage
- 读取时先检查是否存在及是否过期
function setCache(key, data, expireInMinutes = 30) {
const cache = {
data: data,
timestamp: Date.now(),
expire: expireInMinutes * 60 * 1000
};
localStorage.setItem(key, JSON.stringify(cache));
}
function getCache(key) {
const raw = localStorage.getItem(key);
if (!raw) return null;
const cache = JSON.parse(raw);
const now = Date.now();
if (now - cache.timestamp > cache.expire) {
localStorage.removeItem(key);
return null;
}
return cache.data;
}
利用内存缓存提升访问速度
对于单次会话中频繁使用的数据，可采用内存对象进行缓存，避免重复解析或计算。
立即学习“Java免费学习笔记（深入）”；
适用于：DOM 查询结果、函数计算中间值、临时状态数据。
- 在插件初始化时创建私有缓存对象
- 通过 key-value 形式存储数据
- 页面刷新后自动清空，无需手动管理过期
class MyPlugin {
constructor() {
this._cache = new Map(); // 使用 Map 提高查找效率
}
getData(url) {
if (this._cache.has(url)) {
return Promise.resolve(this._cache.get(url));
}
return fetch(url)
.then(res => res.json())
.then(data => {
this._cache.set(url, data);
return data;
});}
clearCache(url) {
if (url) this._cache.delete(url);
else this._cache.clear();
}
}
结合 sessionStorage 实现会话级缓存
sessionStorage 与 localStorage 类似，但生命周期仅限当前会话，关闭标签页后自动清除。
适用于：登录态临时数据、表单草稿、导航状态等。
- 用法与 localStorage 基本一致
- 更安全，不会跨会话泄露数据
- 容量通常较小（约5MB）
// 保存
sessionStorage.setItem('formDraft', JSON.stringify(draftData));
// 恢复
const draft = sessionStorage.getItem('formDraft');
if (draft) loadForm(JSON.parse(draft));
智能缓存策略：优先读内存，降级查本地
高性能插件往往结合多种缓存方式，形成层级结构：
- 第一层：内存缓存（最快，但易失）
- 第二层：localStorage/sessionStorage（较慢，持久）
- 第三层：网络请求（最慢，兜底）
读取流程：内存 → 本地存储 → 请求服务器 → 更新各级缓存
写入流程：同步更新内存 + 异步持久化到 localStorage
基本上就这些。合理选择缓存方式，能有效减少重复请求，加快响应速度，同时注意控制缓存大小和清理机制，避免内存泄漏或存储溢出问题。
