cookies、sessionStorage和localStorage的区别

1、生命周期：

cookie：

cookie如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。这种生命期为浏览会话期的cookie被称为会话cookie。会话cookie一般不保存在硬盘上而是保存在内存里。

如果设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存的cookie，不同的浏览器有不同的处理方式。

cookie.setmaxage设置为0时，会马上在浏览器上删除指定的cookie

cookie.setmaxage设置为-1时，代表关闭当前浏览器即失效。

sessionStorage：

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

localStorage：

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

2、存储大小

cookie：

单个cookie的大小限制一般是4K   注意是针对单个cookie

sessionStorage：

sessionStorage的存储数据大小一般都是：5MB  不知道是针对所有的还是一个会话窗口

localStorage：

每一个域名下的localStorage容量一般是5M  注意这个5M是针对一个域名的

3、存储位置

cookie、localStorage和sessionStorage都保存在客户端。

浏览器发送请求的时候，cookie会自动携带在请求头里面，localStorage和sessionStorage不与服务器进行交互通信。

cookie：

cookie如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。这种生命期为浏览会话期的cookie被称为会话cookie。会话cookie一般不保存在硬盘上而是保存在内存里。

如果设置了过期时间，浏览器就会把cookie保存到硬盘上，

sessionStorage：存放在内存里

localStorage：存放在硬盘里面

4、存储内容类型

cookie、localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式

localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、作用范围

cookie localStorage：

cookie和localStorage受同源策略限制。跨域请求默认不带cookie等凭证。

能够成功使用带有 Cookie 的跨域资源请求需要满足以下几个条件：

• XMLHttpRequest 对象中指定了 withCredentials = true，比如axios.defaults.withCredentials = true

• 服务器响应头中 Access-Control-Allow-Credentials: true

• 服务器响应头中 Access-Control-Allow-Origin 不能为 *，必须指定源地址，比如“http://localhost:8080”

sessionStorage：

刷新当前页面，或者通过location.href、window.open、或者通过带target="_blank"的a标签打开新标签，之前的sessionStorage还在，但是如果你是主动打开一个新窗口或者新标签，对不起，打开F12你会发现，sessionStorage空空如也。

也就是说，sessionStorage的session仅限当前标签页或者当前标签页打开的新标签页，通过其它方式新开的窗口或标签不认为是同一个session。（未验证）