存储

Storage 接口是 Web 存储 API 的一部分，提供对特定域的会话或本地存储的访问。例如，它允许添加、修改或删除存储的数据项。

例如，要操作某个域的会话存储，需要调用 Window.sessionStorage；而对于本地存储，则需要调用 Window.localStorage。

实例属性

Storage.length 只读

返回一个整数，表示存储在 Storage 对象中的数据项数量。

实例方法

Storage.key()

当传递一个数字 n 时，此方法将返回存储中第 n 个键的名称。

Storage.getItem()

当传递一个键名时，将返回该键的值。

Storage.setItem()

当传递一个键名和值时，将向存储中添加该键，或者如果该键已存在，则更新该键的值。

Storage.removeItem()

当传递一个键名时，将从存储中删除该键。

Storage.clear()

调用时，将清空存储中的所有键。

示例

在这里，我们通过调用 localStorage 来访问 Storage 对象。我们首先使用 !localStorage.getItem('bgcolor') 测试本地存储是否包含数据项。如果包含，我们将运行一个名为 setStyles() 的函数，该函数使用 Storage.getItem() 获取数据项，并使用这些值来更新页面样式。如果不包含，我们将运行另一个函数 populateStorage()，该函数使用 Storage.setItem() 设置项值，然后运行 setStyles()。

js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

function setStyles() {
  const currentColor = localStorage.getItem("bgcolor");
  const currentFont = localStorage.getItem("font");
  const currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = `#${currentColor}`;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}

注意：要查看此示例作为完整的运行示例，请参阅我们的 Web 存储演示。

规范

规范
HTML 标准
# storage

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅