前端必知必会-HTML Web Storage API

---

HTML Web 存储 API

HTML Web 存储；优于 Cookie。

什么是 HTML Web 存储？

借助 Web 存储，Web 应用程序可以在用户的​​浏览器中本地存储数据。

在 HTML5 之前，应用程序数据必须存储在 Cookie 中，并包含在每个服务器请求中。Web 存储更安全，并且可以在本地存储大量数据，而不会影响网站性能。

与 Cookie 不同，存储限制要大得多（至少 5MB），并且信息永远不会传输到服务器。

Web 存储是按来源（按域和协议）存储的。来自一个来源的所有页面都可以存储和访问相同的数据。

HTML Web Storage 对象

HTML Web Storage 提供两个对象用于在客户端上存储数据：

window.localStorage - 存储没有到期日期的数据
window.sessionStorage - 存储一个会话的数据（浏览器选项卡关闭时数据会丢失）
在使用 Web Storage 之前，请检查浏览器是否支持 localStorage 和 sessionStorage：

if (typeof(Storage) !== "undefined") {
// localStorage/sessionStorage 的代码。
} else {
// 抱歉！不支持 Web Storage。
}

localStorage 对象

localStorage 对象存储没有到期日期的数据。浏览器关闭时数据不会被删除，并且将在第二天、下周或下一年可用。

示例

// 存储
localStorage.setItem("lastname", "Smith");

// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

示例说明：

创建一个 localStorage 名称/值对，其中 name=“lastname” 和 value=“Smith”

检索“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 + " 次。";

---

总结

本文介绍了的使用，如有问题欢迎私信和评论