cookie、localStorage、sessionStorage的区别

基本概念

cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息、存储登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

本地存储，是HTML5新增的技术，localStorage被大多数浏览器支持，主要用途有存储各种信息。

sessionStorage

会话存储，就是存储在会话当中，关掉会话窗口，数据清除。
#三者的异同

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

实际操作

sessionStorage、localStorage

sessionStorage和localStorage使用方法基本相同，都有相同的方法，例如setItem、getItem和removeItem等

localStorage.setItem('biubiubiu','bbb') //设置用户信息，将bbb存储到字段biubiubiu中
>>undefined
localStorage.getItem('biubiubiu')  //获取biubiubiu字段信息
>>"bbb"
localStorage.removeItem('biubiubiu')  //移出biubiubiu字段信息
>>undefined
localStorage.getItem('biubiubiu')  //此时看到biubiubiu的值已经为null了
>>null
localStorage.clear()  //清除所有用户信息