HTML Web Storage API

什么是 HTML Web Storage？

使用 Web Storage，应用程序可以在用户的浏览器本地存储数据。

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

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

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

Web Storage API 对象

Web Storage 提供两个对象用于在浏览器中存储数据：

• window.localStorage - 存储没有过期日期的数据（浏览器标签页关闭时数据不会丢失）
• window.sessionStorage - 存储一个会话的数据（浏览器标签页关闭时数据会丢失）

浏览器支持

表格中的数字指定了完全支持 Web Storage 的第一个浏览器版本。

测试 Web Storage API 支持

在使用 Web Storage 之前，我们可以快速检查浏览器对 localStorage 和 sessionStorage 的支持：

实例

测试浏览器支持：

<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
  x.innerHTML = "Your browser supports Web storage!";
} else {
  x.innerHTML = "抱歉，不支持 Web Storage！";
}
</script>

亲自试一试

localStorage 对象

localStorage 对象存储没有过期日期的数据。浏览器关闭时数据不会丢失，并且在第二天、下周或明年仍然可用。

实例

使用 localStorage 设置和检索名称/值对：

<script>
const x = document.getElementById("result");

if (typeof(Storage) !== "undefined") {
  // 存储
  localStorage.setItem("lastname", "Smith");
  localStorage.setItem("bgcolor", "yellow");
  // 检索
  x.innerHTML = localStorage.getItem("lastname");
  x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
  x.innerHTML = "抱歉，不支持 Web Storage！";
}
</script>

亲自试一试

示例解释：

• 使用 localStorage.setItem() 方法创建名称/值对
• 使用 localStorage.getItem() 方法检索设置的值
• 检索 "lastname" 的值并将其插入到 id="result" 的元素中
• 检索 "bgcolor" 的值并将其插入到 id="result" 元素的样式 backgroundColor 中

删除 "lastname" localStorage 项的语法如下：

localStorage.removeItem("lastname");

注意：名称/值对始终以字符串形式存储。记住在需要时将它们转换为其他格式！

使用 localStorage 计数点击次数

下面的例子计算用户点击按钮的次数。在这段代码中，值字符串被转换为数字，以便能够增加计数器：

实例

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    x.innerHTML = "您已点击按钮 " + localStorage.clickcount + "  次！";
  } else {
    x.innerHTML = "抱歉，不支持 Web Storage！";
  }
}
</script>

亲自试一试

sessionStorage 对象

sessionStorage 对象与 localStorage 对象相同，只是它仅存储一个会话的数据！当用户关闭特定的浏览器标签页时，数据会被删除。

下面的例子计算用户在当前会话中点击按钮的次数：

实例

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    x.innerHTML = "您在此会话中已点击按钮 " + sessionStorage.clickcount + " 次！";
  } else {
    x.innerHTML = "抱歉，不支持 Web Storage！";
  }
}
</script>

亲自试一试