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依然有效直到超过设定的过期时间。
存储在硬盘上的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');
}
原生接口可以接受，可以封装来对Object和Array有更好的支持。封装如下：
localStorage与sessionStorage的封装（可设置过期时间）
.
cookie
需要自己进行封装，原生的cookie接口不够友好。封装如下：
