cookie、localStorage、sessionStorage区别

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
5、localStorage不能被爬虫抓取到。

一、cookie

cookie:如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束(会话cookie)。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。
存储内容：cookie只能保存字符串类型，以文本的方式
存储大小：单个cookie保存的数据不能超过4kb
安全性：Cookie欺骗，Cookie截获
应用场景：

• 判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
• 保存上次登录的时间等信息。
• 保存上次查看的页面
• 浏览计数

缺点：大小受限
用户可以操作（禁用）cookie，使功能受限
安全性较低
有些状态不可能保存在客户端。
每次访问都要传送cookie给服务器，浪费带宽。
cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

二、WebStorage

WebStorage两个主要目标：
（1）提供一种在cookie之外存储会话数据的路径。
（2）提供一种存储大量可以跨会话存在的数据的机制。
localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
**sessionStorage：**生命周期是在仅在当前会话下有效。，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB。
存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。
获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
应用场景：
localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
sessionStorage：敏感账号一次性登录；
WebStorage的优点：
（1）存储空间更大：cookie为4KB，而WebStorage是5MB；
（2）节省网络流量：一旦数据保存在本地之后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要的来回传递
（3）临时存储：对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

（6）WebStorage提供了一些方法，数据操作比cookie方便；

setItem (key, value) —— 保存数据，以键值对的方式储存信息。

  　　 getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

    　　removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

    　　clear () ——  删除所有的数据

    　　key (index) —— 获取某个索引的key

三、总结

相同：
都是保存在浏览器端，且同源的。
区别：
1、http请求：
cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
sessionStorage和localStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2、存储空间：
cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。
sessionStorage和localStorage可以达到5M或更大
3、生命周期：
cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效
sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。
localStorage：除非被手动清除，否则将会永久保存
4、作用域不同：
cookie也是在所有同源窗口中都是共享的
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；
5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
6、易用性：
cookie：需要程序员自己封装，源生的Cookie接口不友好
web Storage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
7、安全性：
WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

参考: https://www.cnblogs.com/cencenyue/p/7604651.html