HTML 网页存储 API
HTML 网页存储；比 cookie 更好。
什么是 HTML 网页存储？
使用网页存储，网页应用程序可以将数据本地存储在用户的浏览器中。
在 HTML5 之前，应用程序数据必须存储在 cookie 中，包含在每个服务器请求中。网页存储更安全，并且可以将大量数据本地存储，而不会影响网站性能。
与 cookie 不同，存储限制更大（至少 5MB），信息绝不会传输到服务器。
网页存储是按来源（按域和协议）进行的。来自同一个来源的所有页面都可以存储和访问相同的数据。
浏览器支持
表中的数字指定完全支持网页存储的第一个浏览器版本。
| API | |||||
|---|---|---|---|---|---|
| 网页存储 | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML 网页存储对象
HTML 网页存储提供两个对象，用于在客户端存储数据
window.localStorage- 存储没有过期日期的数据window.sessionStorage- 为一个会话存储数据（当浏览器标签页关闭时，数据会丢失）
在使用网页存储之前，请检查浏览器对 localStorage 和 sessionStorage 的支持
if (typeof(Storage) !== "undefined") {
// localStorage/sessionStorage 的代码。
} else {
// 抱歉！不支持网页存储。
}
localStorage 对象
localStorage 对象存储数据，没有过期日期。当浏览器关闭时，数据不会被删除，并且会在第二天、一周或一年后可用。
示例
// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
尝试一下 »
示例说明
- 创建一个名为 "lastname"、值为 "Smith" 的 localStorage 键值对
- 检索 "lastname" 的值，并将其插入 ID 为 "result" 的元素中
上面的示例也可以这样写
// 存储
localStorage.lastname = "Smith";
// 检索
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 对象相同，除了它只存储一个会话的数据。当用户关闭特定浏览器标签页时，数据会被删除。
以下示例统计用户在当前会话中单击按钮的次数
示例
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已单击按钮 " +
sessionStorage.clickcount + " 次（在本会话中）。";
尝试一下 »
