webStorage

在测试某产品本地缓存时，接触到了localStorage，所以搜索了下相关资料，学习一下。

localStorage是webStorage中的一种。webStorage是 html5 提供的本地存储方案，包括两种方式：sessionStorage 和 localStorage。webStorage的存储特点有：
存储位置：保存在客户端，不与服务器通信
存储大小：存储空间大约5MB
存储内容：仅支持 String 类型的存储内容。要存储对象时，需要先将对象转化为json字符串进行存储。

var user= {"name" : "lisi"; "age" : "24"};
localStorage.setItem("user", JSON.stringify(user));  

localStorage
持久化的本地存储，浏览器关闭重新打开数据依然存在（除非手动删除数据）。数据被存放在本地硬盘中，关掉浏览器数据不会被清除，在同一个浏览器的不同tab页中，localStorage是共享的，但是不同的浏览器存储的localStorage是不共享的。
应用场景：长期登录、判断用户是否已登录，适合长期保存在本地的数据。
一些相关API：
保存数据：

window.localStorage.setItem('key', 'value');

获取数据：

window.localStorage.getItem('key')

清除某个key对应的数据：

window.localStorage.removeItem('key');

清除所有数据：

window.localStorage.clear()

获取当前localStorage已使用大小：

(function(){
    if(!window.localStorage) {
        console.log('浏览器不支持localStorage');
    }
    var size = 0;
    for(item in window.localStorage) {
        if(window.localStorage.hasOwnProperty(item)) {
            size += window.localStorage.getItem(item).length;
        }
    }
    console.log('当前localStorage容量为' + (size / 1024).toFixed(2) + 'KB');
})()

sessionStorage
sessionStorage存储的数据只有在同一个会话中才能被访问，关闭浏览器数据就会被清除。sessionStorage存储的数据是不能跨进程的，也就是在同一个浏览器的不同tab页中，sessionStorage不是共享的。sessionStorage数据存储在浏览器内存中，因此关闭浏览器数据就会被清除。
应用场景：敏感账号一次性登录。

参考：
https://segmentfault.com/a/1190000015804205
https://segmentfault.com/a/1190000016693768
https://segmentfault.com/a/1190000023462351