Storage

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

例如，要操作某个域的会话存储，需要调用 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()。

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 Storage 演示。

规范

规范
HTML # storage

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2024年7月26日修改。

在 GitHub 上查看此页面 • 报告此内容的问题