html5怎么记录缓存_html5用localStorage或sessionStorage记录缓存数据【记录】_网络技术

发布时间 - 2025-12-27 00:00:00 点击率：次

localStorage和sessionStorage是HTML5提供的客户端存储机制：前者持久化保存数据，后者仅限当前标签页会话；均需检测浏览器支持性，并可通过时间戳封装实现过期控制。

如果您希望在网页中持久化保存用户数据或临时缓存信息，HTML5 提供了 localStorage 和 sessionStorage 两种客户端存储机制。以下是使用这两种 API 记录缓存数据的具体操作步骤：

一、使用 localStorage 持久化保存数据

localStorage 将数据以键值对形式保存在浏览器中，数据不会因页面关闭或浏览器重启而丢失，除非被手动清除或通过脚本删除。

1、在 JavaScript 中调用 window.localStorage.setItem(key, value) 方法，传入字符串类型的键和值。

2、若需保存对象，先使用 JSON.stringify() 将其序列化为字符串后再存入。

3、读取时使用 window.localStorage.getItem(key) 获取对应值，并用 JSON.parse() 还原为对象（如原为对象）。

4、删除指定键值对可调用 window.localStorage.removeItem(key)；清空全部数据则调用 window.localStorage.clear()。

sessionStorage 的作用域限定于当前浏览器标签页，数据仅在该页面会话期间有效，关闭标签页后自动清除，适合临时状态记录。

1、调用 window.sessionStorage.setItem(key, value) 存储数据，参数要求与 localStorage 完全一致。

2、读取数据使用 window.sessionStorage.getItem(key)，返回值类型也相同。

3、删除单个条目使用 window.sessionStorage.removeItem(key)，清空全部使用 window.sessionStorage.clear()。

4、注意：同一域名下不同标签页的 sessionStorage 相互隔离，无法共享数据。

在调用 localStorage 或 sessionStorage 前，应先判断当前环境是否支持，避免运行时报错导致脚本中断。

1、编写条件判断语句：if (typeof window.localStorage !== 'undefined')，成立则表示支持 localStorage。

2、同理检测 sessionStorage：if (typeof window.sessionStorage !== 'undefined')。

3、若不支持，可降级使用 cookie 或内存变量暂存数据，但需注意 cookie 有大小限制且随请求发送。

原生 localStorage 不提供自动过期机制，可通过在保存时附加时间戳并读取时校验来模拟 TTL（Time-To-Live）行为。

1、存入时构造包含时间戳的对象：{ value: data, expires: Date.now() + 60 * 60 * 1000 }（例如 1 小时后过期）。

2、读取时先解析 JSON，再比对 Date.now() ，不满足则视为过期并执行 removeItem()。

3、将该逻辑封装为 setWithExpiry(key, value, ttlMs) 和 getWithExpiry(key) 两个函数，提升复用性。

当尝试写入超出浏览器配额（通常为 5–10MB）的数据时，会抛出 QuotaExceededError 异常，需主动捕获并响应。

1、在 setItem 调用外层包裹 try-catch 结构，捕获 e.name === 'QuotaExceededError'。

2、触发异常后，可提示用户“缓存空间已满”，并建议清理历史数据或压缩待存内容。

3、也可预先估算序列化后字符串长度：new TextEncoder().encode(JSON.stringify(obj)).length，提前规避超限风险。