WebStorage是HTML5新增的特性,用于本地存储。WebStorage的出现,是为了解决早期使用Cookie进行本地存储的以下不足:
1)Cookie大小有限制,一般不超过4KB,而WebStorage可以进行大容量的存储
2)Cookie包含在每个HTTP请求中,会导致多次发送重复数据给服务器
3)Cookie在网络传输时未经加密(使用SSL除外),存在安全隐患
一、Storage接口
sessionStorage
和 localStorage
都实现了 Storage
接口。Storage接口具有以下的属性和方法:
1)length
返回改Storage中存储的key-value对数
2)key(index)
返回第index个key
3)getItem(key)
获得键名为key的键值对的值
4)setItem(key, value)
设置键值对key=value
5)removeItem(key)
移除键名为key
的键值对
6)clear()
清除所有的键值对
二、localStorage和sessionStorage
这两个本地存储方式,均含有一样的方法和属性。区别在于:sessionStorage的生命周期取决于用户的会话,当用户会话结束后(如关闭浏览器、离开页面),sessionStorage便会被清除;而localStorage则会长时间存储,直到用户显示清除;访问方法:
window.localStorage
/localStorage
window.sessionStorage
/sessionStorage
三、遍历
使用for
结合localStorage.length
来遍历便可,如:
for(let i=0; i<localStorage.length; ++i) {
var key = localStorage.key(i);
console.log(key + "=" + localStorage.getItem(key));
}