详细解析cookie，sessionStroage和localStroage的区别

详细解析cookie，sessionStroage和localStroage的区别

前面我们说到了JavaScript中的缓存对象，主要是cookie,sessionStroage和localStroage，今天我们来讲一下这三者之间的区别。

共同点

1. 都是保存在浏览器端，且同源的。(所谓同源就是协议，域名，端口号相同)。
2. 都是字符串类型的键值对。

区别

1.cookie

1. HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储

2. cookie的构成：
   名称：name(不区分大小写,但最好认为它是区分的)
   值:value(通过URL编码:encodeURIComponent)
   域
   路径
   失效时间:一般默认是浏览器关闭失效,可以自己设置失效时间
   安全标志:设置安全标志后只有SSL连接的时候才发送到服务器。

3. cookie的作用:主要用于保存登录信息。

4. 生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。

5. cookie的优点：具有极高的扩展性和可用性
   通过良好的编程，控制保存在cookie中的session对象的大小
   通过加密和安全传输技术，减少cookie被破解的可能性
   只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失
   控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie。

6. cookie的缺点：
   cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉
   安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用
   有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用。

2.sessionStorage

1. sessionStorage是Storage类型的一个对象，拥有clear(),getItem(name),key(index),removeItem(name),setItem(name,value)方法。

2. sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。

3. 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

4. sessionStorage为临时保存。

3.localStorage

1. localStorage也是Storage类型的一个对象。

2. 在HTML5中localStorage作为持久保存在客户端数据的方案取代了globalStorage(globalStorage必须指定域名)。

3. localStorage会永久存储会话数据，除非removeItem,否则会话数据一直存在。

4. 将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

5. localStorage为永久保存。

总结 :简单区别如图。

1、localStorage 拓展了 cookie 的 4K 限制。
2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。

localStorage 的局限

1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。

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

localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。