作为 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() 函数,该函数使用 localStorage.getItem() 来获取数据项,并使用这些值更新页面样式。如果不包含,我们运行另一个函数 populateStorage(),该函数使用 localStorage.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() {
  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);
}

备注:要运行完整的例子,可查看 Web Storage Demo

规范

Specification Status Comment
Unknown
Storage
Unknown  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
StorageChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
clearChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
getItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
keyChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
lengthChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
removeItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
setItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

相关链接

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, zhangchen, woden0415, tkpromise, AlexChao, ThijsK
最后编辑者: mdnwebdocs-bot,