在近期开发的项目中，分别使用到了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
网友评论