前端面试常问【Cookie、SessionStorage、 LocalStorage】三者之间的比较认识与理解。

【Cookie、SessionStorage、 LocalStorage】三者之间的比较认识与理解

前言

谈到Cookie、SessionStorage、LocalStorage三者之间的比较，也是前端历年来老生常谈的问题了，但是对于咋们这样的新手仍然是一个很模糊的概念，同时也是前端面试中比较高频问到的问题，这里也是想了很久，自己打算总结一下，供自己以后复习巩固，也可以分享给有共同需求的小伙伴们。

---

---

一、Cookie

• 初步认识：

简介

Cookie 并不是它的原意“甜饼”的意思, 而是一个保存在客户机中的简单的文本文件, 这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。由于“Cookie”具有可以保存在客户机上的神奇特性, 因此它可以帮助我们实现记录用户个人信息的功能, 而这一切都不必使用复杂的CGI等程序 。

举例来说, 一个 Web 站点可能会为每一个访问者产生一个唯一的ID, 然后以 Cookie 文件的形式保存在每个用户的机器上。如果使用浏览器访问 Web, 会看到所有保存在硬盘上的 Cookie。在这个文件夹里每一个文件都是一个由“名/值”对组成的文本文件,另外还有一个文件保存有所有对应的 Web 站点的信息。在这里的每个 Cookie 文件都是一个简单而又普通的文本文件。透过文件名, 就可以看到是哪个 Web 站点在机器上放置了Cookie(当然站点信息在文件里也有保存) 。

组成
Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。其中 ：

(1)Name/Value：设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌。

(2)Expires属性：设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效 。

(3)Path属性：定义了Web站点上可以访问该Cookie的目录 [3] 。

(4)Domain属性：指定了可以访问该 Cookie 的 Web 站点或域。Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻击的危险，比如攻击者可以借此发动会话定置攻击。因而，浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻击发生的范围 [3] 。

(5)Secure属性：指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到SSL证书无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。由于许多用户缺乏安全意识，因而仍可能连接到Pharming攻击所伪造的网站。

(6)HTTPOnly 属性 ：用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。

• 数据的声明周期：一般由服务器生成，可设置失效时间，如果在浏览器生成，默认是浏览器关闭后失效。
• 存放数据大小：一般不超过4KB
• 与服务端通信：每次都是保存在http请求头中，如果用cookie保存过多数据，会造成性能问题。
• 用途：一般由服务器端生成，用来进行用户身份标识。

二、SessionStorage

• 初步认识：
• 数据的声明周期：仅在当前会话有效，关闭页面或者浏览器被清楚。
• 存放数据大小：5MB
• 与服务端通信：仅在客户端中保存，不参与服务端的通信
• 用途：用于浏览器缓存数据

三、LocalStorage

• 初步认识：
• 数据的声明周期：除非被手动清楚，否则永久保存
• 存放数据大小：5MB
• 与服务端通信：仅在客户端中保存，不参与服务端的通信
• 用途：用于浏览器缓存数据