愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

HTML5中的本地存储

WebStorage是HTML5新增的特性,用于本地存储。WebStorage的出现,是为了解决早期使用Cookie进行本地存储的以下不足:
1)Cookie大小有限制,一般不超过4KB,而WebStorage可以进行大容量的存储
2)Cookie包含在每个HTTP请求中,会导致多次发送重复数据给服务器
3)Cookie在网络传输时未经加密(使用SSL除外),存在安全隐患

一、Storage接口

sessionStoragelocalStorage 都实现了 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));
}