Storage - 提供对特定域的会话或本地存储的访问

Storage 是 Web Storage 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()。

if(!localStorage.getItem('bgcolor')) {
  populateStorage();
}
setStyles();

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

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var 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);
}

注意：要查看完整的工作实例，请参阅我们的网络存储演示。

规范

规范	状态	备注
HTML Living Standard Storage 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 使用 Web Storage API
• Window.localStorage
• Window.sessionStorage
• CacheStorage