Storage
作为 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 |
---|
HTML Standard # storage |
浏览器兼容性
BCD tables only load in the browser