cookie、sessionStorage和localStorage的区别

Cookies 

　　Cookie 是通过浏览器将服务器返回的数据保存在本地的一小块数据（一般小于4kb）。当浏览器发送请求且浏览器存在 Cookie 时，浏览器会自动在请求头携带上 Cookie 数据。引入 Cookie 的意义是因为 HTTP 的请求是无状态的，如：浏览器发出的请求服务器没办法区分浏览器用户身份以及用户的相关操作状态（可以通过 Cookie 传递这些信息）。最开始 Cookie 被作为唯一的存储手段，但是因为浏览器的每次请求都会携带上 Cookie，会带来额外的开销，而且存储量比较小，所以后来浏览器推出了新的 Api（web storage Api和 indexedDb）。

　　cookie非常小，限制在4kb左右，很多浏览器都限制一个站点最多保存20个cookie。

　　如果没有设置时间，则表示cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失，这种被称为会话cookie，它会被保存在内存中。

　　当设置了过期时间，浏览器会把cookie保存在硬盘中，关闭浏览器之后任然有效，直到超过设定的过期时间。

Cookie 主要使用在以下场景

　　会话状态管理（如用户登录状态、及其他需要记录的信息）

　　个性化设置（如用户自定义设置）

　　浏览器追踪行为（如追踪分析用户行为）

 

webstorage本地存储

webstorage是本地存储，WebStorage的目标是提供一种在cookie之外存储会话数据的路径，和提供一种存储大量可以跨会话存在的数据的机制，其中包括localStorage和sessionStorage，接来下我们看看它们的特点：

（1）生命周期

　　localStorage 生命周期是永久，储存的信息是永远不会消失的，除非你自己主动清除localStorage信息。

　　sessionStorage仅在当前会话下有效，关闭页面或浏览器后数据会被清除。

（2）作用域

　　不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口）；

　　但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间 是可以共享sessionStorage的。

（3）存储大小

　　localStorage和sessionStorage的存储数据大小一般都是：5MB

（4）存储位置

　　localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信

（5）存储内容类型

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

（6）获取方式

　　localStorage：window.localStorage;　　sessionStorage：window.sessionStorage;

（7）应用场景

　　localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据；

　　sessionStorage：敏感账号一次性登录，比如游客身份。

 

Cookie、sessionStorage和localStorage的区别

相同点：都存储在客户端

不同点：

（1）存储大小

　　cookie的存储大小不超过4KB；

　　sessionStorage和localStorage可以达到5MB或更大。

（2）数据存在的时间

　　LocalStorage：关闭浏览器数据依旧会存在，除非主动删除其中数据；

　　sessionStorage：当前页关闭则数据删除；

　　cookie：根据用户设置的cookie保存时间来定，在设定时间到来之前都会一直存在。

（3）数据与服务器之间的交互方式

　　cookie的数据会自动传递到服务器，服务器的也可以写到客户端；

　　LocalStroage和sessionStroage的数据仅保存在本地。

（4）作用域

　　cookie在所有同源窗口中都是共享的；

　　localstorage在所有同源窗口中都是共享的；

　　sessionStorage相同浏览器的不同页面或标签页间无法共享sessionStorage的信息。