HTML5localStorage缓存数据方法

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《HTML5如何用localStorage记录缓存数据》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

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 保存会话级缓存

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

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

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

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

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

三、检测浏览器是否支持 Storage API

在调用 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，提前规避超限风险。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。