简述cookie、sessionStorage和localStorage的区别

共同点：都是保存在浏览器端，用来在浏览器端存储数据,且都是同源的。

 

1、localStorage

　localStorage 是 HTML5 标准中新加入的技术，始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。而且在所有同源窗口中都是共享的。

　保存在客户端，不与服务器进行交互通信。存储数据大小一般都是：5MB。

　应用场景：常用于长期登录（判断用户是否已登录），适合长期保存在本地的数据。

 

2、sessionStorage

　sessionStorage也是 HTML5 标准中新加入的技术，用于临时保存同一窗口(或标签页)的数据，仅在当前浏览器窗口关闭前有效,在关闭窗口或标签页之后将会删除这些数据。

　保存在客户端，不与服务器进行交互通信。存储数据大小一般都是：5MB。

　应用场景：敏感账号一次性登录。

 

3、cookie

　cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。而且在所有同源窗口中都是共享的。

　cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下,存储的大小很小只有 4K 左右。 

　应用场景：

• 因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么。为了做到这点，就需要使用到Cookie了。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。

• 保存用户登录状态。例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设置过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。

• 自定义设置，定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用 cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

 

  总结