cookie、sessionStorage、localStorage的区别

cookie、sessionStorage、localStorage的区别：1、存储空间不同；2、存储方式不同；3、生命周期不同。存储空间不同是指每个 cookie 的大小一般不能超过 4KB，sessionStorage和localStorage某些浏览器支持的大小为 5MB，但是不同浏览器的具体实现有所不同。

一、cookie、sessionStorage、localStorage的区别

1、存储空间不同

Cookie：每个 Cookie 的大小一般不能超过 4KB。
sessionStorage：某些浏览器支持的大小为 5MB，但是不同浏览器的具体实现有所不同。
localStorage：某些浏览器支持的大小为 5MB，但是不同浏览器的具体实现有所不同。

2、存储方式不同

Cookie：存储在浏览器的“cookie文件夹”中，保存在用户的磁盘上。每次访问相同的域名时，浏览器都会将存储在 cookie 文件夹中的 Cookie 信息发送给服务器。
sessionStorage：保存在浏览器的“sessionStorage数据库”中，当会话结束，这部分存储的信息也会被清除。与 localStorage 相似，sessionStorage 也只能存储字符串类型的数据。
localStorage：保存在浏览器的“localStorage数据库”中，不会随着 HTTP 请求发送到服务器上，即仅在客户端（浏览器）本地存储，并始终可用于同一浏览器和同一服务器。localStorage 只能存储字符串类型的数据。

3、生命周期不同

Cookie：生命周期可以设置，可以在指定的时间之前保存，当到达指定时间后 Cookie 就会自动失效；也可以设置为关闭浏览器后就过期；还可以设置为只在当前会话中有效，即关闭页面后就自动删除。
sessionStorage：存储的数据仅在会话期间存在，即只在浏览器打开期间存在，关闭窗口或者浏览器后数据会被删除。
localStorage：存储的数据长期存在，一直存在浏览器本地。

二、cookie介绍

1、简介

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

举例来说，一个 Web 站点可能会为每一个访问者产生一个少数的ID，然后以 Cookie 文件的形式保存在每个用户的机器上。如果使用浏览器访问 Web，会看到所有保存在硬盘上的 Cookie。在这个文件夹里每一个文件都是一个由“名/值”对组成的文本文件，另外还有一个文件保存有所有对应的 Web 站点的信息。在这里的每个 Cookie 文件都是一个简单而又普通的文本文件。透过文件名，就可以看到是哪个 Web 站点在机器上放置了Cookie（当然站点信息在文件里也有保存）。所谓“cookie”数据是指某些网站为了辨别用户身份，储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。通俗来讲就是指缓存数据，包括用户名、密码、注册账户、手机号等公民个人信息。

2、组成

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

Name/Value：设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌。
Expires属性：设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效。
Path属性：定义了Web站点上可以访问该Cookie的目录。
Domain属性：指定了可以访问该 Cookie 的 Web 站点或域。Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻击的危险，比如攻击者可以借此发动会话定置攻击。因而，浏览器禁止在 Domain 属性中设置.org、.com 等通用拔尖域名、以及在国家及地区拔尖域下注册的二级域名，以减小攻击发生的范围。
Secure属性：指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到SSL证书无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。由于许多用户缺乏安全意识，因而仍可能连接到Pharming攻击所伪造的网站。
HTTPOnly属性 ：用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。

三、sessionStorage的用法

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。下面是其用法：

<!DOCTYPE HTML>
 <html>
 <head>
   <meta charset="utf-8">
   <title>SessionStorage</title>
 <script type="text/javascript">
     window.onload = function()
     {
         //首先获得body中的3个input元素
         var msg = document.getElementById("msg");//文本框要输入的内容
         var getData = document.getElementById("getData");//获取数据
         var setData = document.getElementById("setData");//保存数据
         var removeData=document.getElementById("removeData");//移除数据
         setData.onclick = function()//存入数据
         {
             if(msg.value)
             {
                     sessionStorage.setItem("data", msg.value);//把data对应的值保存到sessionStorage
                     alert("信息已保存到data字段中");
             }
             else
             {
                     alert("信息不能为空");
             }
         }
 
         getData.onclick = function()//获取数据
         {
             var msg = sessionStorage.getItem("data");
             if(msg)
             {
                     alert("data字段中的值为：" + msg);//把data对应的值弹出来
             }
             else
             {
                     alert("data字段无值！");
             }
         }
         removeData.onclick=function() //移除数据
         {
             var msg = sessionStorage.getItem("data");
             sessionStorage.removeChild(msg);
         }
     }
 </script>
 </head>
 <body>
     <input id="msg" type="text"/>
     <input id="setData" type="button" value="保存数据"/>
     <input id="getData" type="button" value="获取数据"/>
     <input id="removeData" type="button" value="移除数据"/>
 </body>
 </html>

四、localStorage的使用方法

存值共有3种方式，localStorage相当于window对象下面的一个属性，所以有[ ]和.调用，但也具有自身的setItem方法。下面是代码示例：

// 自身方法
localStorage.setItem("name","bonly");
// []方法
localStorage["name"]="bonly";
// .方法
localStorage.name="bonly";

取值也是如此，自身的方法是getItem。下面是代码示例：

// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name;

改变的方式，就是相当于给对应的key重新赋值，就会把原来的值覆盖掉。下面是代码示例：

// 自身方法
localStorage.setItem("name","TOM");
// []方法
localStorage["name"]="TOM";
// .方法
localStorage.name="TOM";

延伸阅读1：恶意cookie介绍

Cookies 是文本文件，一般情况下认为它不会造成安全威胁。但是，如果在 Cookies 中通过特殊标记语言，引入可执行代码，就很可能给用户造成严重的安全隐患。HTML 为区别普通文本和标记语言，用符号“<>”来指示HTML 代码。这些 HTML 代码或者定义 Web 网页格式，或者引入 Web 浏览器可执行代码段。 Web 服务器可以使用Cookies 信息创建动态网页。假使 Cookies 包含可执行恶意代码段，那么在显示合成有该 Cookies 的网页时，就会自动执行这段恶意代码。当然，恶意代码能否真正造成危害，还取决于Web 站点的安全配置策略。