什么是 HTML 本地存储？
HTML 本地存储（Local Storage）是一种在用户浏览器中存储数据的技术。
本地存储（Local Storage）允许你在浏览器中保存数据，即使页面刷新或关闭后，数据仍然存在。
本地存储使用键值对形式存储数据，容量较大，通常每个域名至少支持 5MB。
浏览器支持
表格中的数字指示了完全支持本地存储的首个浏览器版本。
| 浏览器 |  |
 |
 |
 |
 |
| 支持 Web Storage 的初始版本 | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML 本地存储对象
HTML 本地存储提供了两个在客户端存储数据的对象：
- window.localStorage - 存储没有截止日期的数据
- window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：
if (typeof(Storage) !== "undefined") {
// 针对 localStorage/sessionStorage 的代码
} else {
// 抱歉！不支持 Web Storage ..
}localStorage 对象
localStorage 对象存储的是没有截止日期的数据。当浏览器关闭时数据不会被删除。
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");实例解释：
- 创建 localStorage 名称/值对，其中：name="lastname"，value="Gates"
- 取回 "lastname" 的值，并把它插到 id="result" 的元素中
上例也可这样写：
// 存储
localStorage.lastname = "Gates";
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;删除 "lastname" localStorage 项目的语法如下：
localStorage.removeItem("lastname");提示：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！
下面的例子对用户点击按钮的次数进行计数。在代码中，值字符串被转换为数值，依次对计数进行递增：
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已经点击这个按钮 " +
localStorage.clickcount + " 次。";sessionStorage 对象
sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。
如果用户关闭具体的浏览器标签页，数据也会被删除。
下例在当前 session 中对用户点击按钮进行计数：
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " +
sessionStorage.clickcount + " 次。";localStorage 对象和sessionStorage 对象的区别
| 特性 | sessionStorage | localStorage |
|---|---|---|
| 数据生命周期 | 仅在当前会话有效，关闭标签页或窗口后数据被清除。 | 数据持久化，关闭浏览器或重启设备后数据仍然存在。 |
| 作用范围 | 仅在当前标签页或窗口内有效，不同标签页之间数据隔离。 | 在同一域名下的所有页面和窗口之间共享。 |
| 存储容量 | 通常每个域名至少支持 5MB。 | 通常每个域名至少支持 5MB。 |
| 适用场景 | 适合存储临时数据，如表单数据、会话状态等。 | 适合存储长期数据，如用户偏好设置、登录状态等。 |
| 数据清除方式 | 关闭标签页或窗口后自动清除，或通过 sessionStorage.clear() 手动清除。 |
只能通过 JavaScript 手动删除或用户清除浏览器缓存。 |
评论区 0
发表评论
教程介绍
HTML5 是 HTML 的修订标准，2014年由万维网联盟（W3C）完成标准制定。
60
章节
128
阅读
0
评论