本文根据JavaScript标准参考教程 整理笔记
概述
浏览器除了cookie
能够存储数据外, 有提供了Storage
类型的存储机制
Storage
有两类, sessionStorage
存储和localStorage
存储. 这两个对象的属性和方法完全一样
操作方法
存入/读取数据
sessionStorage
和localStorage
保存的数据都是键值对.
setItem(key, value)
接收两个参数, key
为键名, value
为要保存的数据
getItem(key)
返回键名为key
的数据
sessionStorage.setItem("key","value");
localStorage.setItem("key","value");
sessionStorage.getItem('key')
localStorage.getItem('key')
清除数据
removeItem(key)
清除键名key
对应的数据
clear()
清除保存的所有数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');
sessionStorage.clear()
localStorage.clear()
遍历操作
sessionStorage
和localStorage
对象有length
属性返回数据的个数
可以使用key()
方法遍历所有的键, 这个方法获得相应位置的键值
for(var i = 0; i < localStorage.length; i++){
console.log(localStorage.key(i));
}
storage事件
当浏览器中存储的数据发生变化时, 我们就会触发storage
事件, 我们可以为这个事件指定回调函数. 回调函数接收一个event
事件对象作为参数. 这个事件对象中有以下属性会用到:
key
, 保存着键名oldValue
:更新前的值。如果该键为新增加,则这个属性为null
。newValue
:更新后的值。如果该键被删除,则这个属性为`null。url
:原始触发storage事件的那个网页的网址。
window.addEventListener("storage",function onStorageChange(e) {
console.log(e.key);
})
storage
事件不在当前页面触发, 它会在浏览器打开的同一域名下的其他页面触发.