sessionStorage和localStorage

在近期开发的项目中，分别使用到了HTML5的 sessionStorage 和 localStorage，特此做下梳理。

sessionStorage 和 localStorage 是 Web Storage API 提供的存储机制，通过该机制，浏览器可以安全地存储键值对，比使用 cookie 更加直观。cookie 因为没有具体的使用过，故不多加赘述，大概知道的就是，cookie 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效。cookie存放的数据限制在4K左右。

sessionStorage 和 localStorage 的区别

sessionStorage: 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话。
localStorage: 存储的数据没有过期时间设置，除非你手动去清除，比如浏览器清缓存，用 js 方法清除数据等。

应该注意的是，无论是 localStorage 还是 sessionStorage 中保存的数据都仅限于该同一域名的协议。

Web Storage 的操作方法

Storage.setItem()

创建新数据项和更新已存在的值。该方法接受两个参数——要创建/修改的数据项的键，和对应的值。

localStorage.setItem('myName', 'jane');

可以在chrome的开发者工具中查看存储情况：

image.png

Storage.getItem()

从存储中获取一个数据项。该方法接受数据项的键作为参数，并返回数据值

console.log(localStorage.getItem('myName')) // jane

Storage.removeItem()

接受一个参数——你想要移除的数据项的键，然后会将对应的数据项从域名对应的存储对象中移除。

Storage.clean()

不接受参数，只是简单地清空域名对应的整个存储对象。

点操作和[]的方式操作

因为 web Storage 是一个键值对象，故不但可以用自身提供的操作方法，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储。

localStorage.myAge = 18;
localStorage['myNationality'] = 'China';

Storage.key() 和 Storage.length

可以实现对存储数据的遍历

var storage = window.localStorage;
for (var i=0, len = storage.length; i  <  len; i++){
    var key = storage.key(i);
    var value = storage.getItem(key);
    console.log(key + "=" + value);
}

通过 StorageEvent 响应存储的变化

为 window 对象添加了一个事件监听器,在当前域名不同页面的localStorage对象发生改变时该事件监听器会触发。

window.addEventListener('storage', function(e) {  
  console.log('storage改变啦~')
});

Web Storage 的几个常用检测方法

检测浏览器是否支持

if(window.localStorage){
    alert("浏览支持localStorage")
}else{
   alert("浏览暂不支持localStorage")
}
//或者
if(typeof window.localStorage == 'undefined'){
    alert("浏览暂不支持localStorage")
}

检测本地存储是否已被填充（页面是否被访问过）

if(!localStorage.getItem('xxx')) {
  // 已被填充
} else {
  // 未被填充
}

Web Storage 的使用场景

个人认为，只要存储的数据不敏感（不担心被修改），不会太大（超出存储容量），可以用 Web Storage 解决的情况都可以使用。
常见于表单用于优化用户体验等。
具体使用 sessionStorage 还是 localStorage 要视项目需求而定。

Web Storage 的存储容量

各浏览器的存储容量上限不同，可在这里测试浏览器的存储容量。

Web Storage 的浏览器兼容性

主流浏览器都能很好的支持，这里主要对IE做下说明，可兼容到IE8。

参考资料

使用 Web Storage API
详说 Cookie, LocalStorage 与 SessionStorage
HTMl5的sessionStorage和localStorage

sessionStorage和localStorage