localStorage、sessionStorage、cookie的区别及用法封装

localStorage

localStorage 的生命周期是永久的，关闭页面或浏览器 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失。

sessionStorage

sessionStorage 的生命周期是仅在当前会话下有效，关闭页面或浏览器 sessionStorage 中的数据会被销毁。

sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的（不同浏览器、同一个页面也是不共享的）。

localStorage 与 sessionStorage 唯一的区别就是：

localStorage 属于永久性存储
sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空

localStorage 与 sessionStorage 的缺点是：

浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
目前所有的浏览器中都会把 localStorage 的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
localStorage 在浏览器的隐私模式下面是不可读取的。
localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
localStorage 不能被爬虫抓取到。

不设置过期时间(cookie保存在内存里)：
则cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。
这种生命期为浏览会话期的cookie被称为会话cookie。
设置了过期时间(浏览器就会把cookie保存到硬盘上)：
则cookie生命周期为只在设置的cookie过期时间之前一直有效。
关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。
存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存的cookie，不同的浏览器有不同的处理方式。

cookie 缺点：

cookie 存放数据大小为4K左右, 且有个数限制（各浏览器不同），一般不能超过20个。不能储存大数据且不易读取。
而 localStorage 和 sessionStorage 能存放5M或者更大。
http请求 时需要发送到服务端，增加了请求的数据量

基本用法

localstorage 和 sessionstorage

if (window.localStorage) { // 判断浏览器是否支持
    alert('浏览支持 localStorage');
    
    // 储存数据 setItem
	localStorage.setItem('key', 'value');
	
	// 获取数据 getItem
	localStorage.getItem('key');
	
	// 删除数据 removeItem
	localStorage.removeItem('key');
	
	// 清除所有数据 clear
	localStorage.clear();
} else {
    alert('浏览暂不支持 localStorage');
}