一、cookie、session、localStorage、sessionStorage区别

1、存储位置不同

Cookie：保存在客户端浏览器中Session：保存在服务器端localStorage：保存在客户端浏览器中的本地存储空间中sessionStorage：与localStorage类似，也保存在客户端浏览器中的本地存储空间中，但数据在窗口关闭后会清除

2、存储容量不同

Cookie：一般只能存储4KB左右的数据Session：存储数据的大小没有限制localStorage：有5MB左右的存储容量限制sessionStorage：有5MB左右的存储容量限制

3、数据类型不同

Cookie：只能存储字符串类型的数据Session：可以存储任意类型的数据，包括对象和数组等localStorage：可以存储任意类型的数据，包括对象和数组等sessionStorage：可以存储任意类型的数据，包括对象和数组等

4、生命周期不同

Cookie：可以设置过期时间，如果不设置则默认为会话结束时过期（即关闭浏览器后失效）Session：只在当前会话中有效，关闭浏览器后失效localStorage：除非用户手动删除，否则永久保存sessionStorage：只在当前会话中有效，关闭浏览器或标签页后失效

5、数据传输不同

Cookie：会随每个http请求被自动发送到服务器端，增加了请求的数据量Session：可以透明地在服务器与客户端之间来回传递localStorage：只存在于客户端浏览器中，不会自动发送给服务器端sessionStorage：只存在于客户端浏览器中，不会自动发送给服务器端

6、应用场景不同

Cookie：一般用于存储会话标识、用户偏好设置等Session：用于保存用户登录状态、购物车等localStorage：适用于永久存储用户数据、缓存数据等sessionStorage：适用于永久存储用户数据、缓存数据等

二、Cookie简介

1、cookie机制

Cookie就是由服务器发给客户端的特殊信息，而这些信息以文本文件的方式存放在客户端，然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。

当用户使用浏览器访问一个支持Cookie的网站的时候，用户会提供包括用户名在内的个人信息并且提交至服务器，接着服务器返回给客户端一个http响应信息时，如果包含Set-Cookie这个响应头部时，意思就是指示客户端建立一个cookie，并且在后续的http请求中自动发送这个cookie到服务器端，直到这个cookie过期。如果没有设置cookie的有效时间，cookie会被保存在内存中，浏览器关闭时就会自动清除这个cookie。反之设置了cookie的有效时间，cookie会被保存在本地硬盘中，浏览器关闭之后再打开，cookie仍然有效，直到设置的有效时间之前都有效。

2、cookie工作原理

在程序中，会话跟踪是很重要的事情。理论上，一个用户的所有请求操作都应该属于同一个会话，而另一个用户的所有请求操作则应该属于另一个会话，二者不能混淆。例如，用户A在超市购买的任何商品都应该放在A的购物车内，不论是用户A什么时间购买的，这都是属于同一个会话的，不能放入用户B或用户C的购物车内，这不属于同一个会话。而Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。即用户A购买了一件商品放入购物车内，当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话，必须引入一种机制。Cookie就是这种机制，给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

三、Session简介

1、session机制

Session是另一种记录客户状态的机制，Session是服务器端使用的一种记录客户端状态的机制，使用上比Cookie简单一些，相应的也增加了服务器的存储压力。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。

2、session工作原理

要使用Session，名列前茅步当然是创建Session了。在创建了Session的同时，服务器会为该Session生成少数的Session id，而这个Session id在随后的请求中会被用来重新获得已经创建的Session；在Session被创建之后，就可以调用Session相关的方法往Session中增加内容了，而这些内容只会保存在服务器中，发到客户端的只有Session id；当客户端再次发送请求的时候，会将这个Session id带上，服务器接受到请求之后就会依据Session id找到相应的Session，从而再次使用之。正式这样一个过程，用户的状态也就得以保持了。

四、localStorage使用方法

localStorage的生命周期是永久，除非手动去清除，否则永远都存在，他的储存大小是5MB，仅在客户端浏览器上储存，不参与服务器的通信。以下是代码示例：

      //设置localStorage保存到本地，名列前茅个为变量名，第二个是值      localStorage.setItem('Author', 'Jane')      // 获取数据      localStorage.getItem('Author')      // 删除保存的数据      localStorage.removeItem('Author')      // 清除所有保存的数据      localStorage.clear()

五、sessionStorage使用方法

sessionStorage顾名思义，是在当前会话下有效，引入了一个“浏览器窗口的概念”，sessionStorage是在同源的同窗口中，始终存在的数据，只要浏览器不关闭，即使是刷新或者进入同源的另一个页面，数据仍在。同时打开“独立”的窗口，即使是同一个页面，sessionStorage的对象也是不同的。关闭窗口后sessionStorage就会被销毁。以下是代码示例：

      // 设置sessionStorage保存到本地，名列前茅个为变量名，第二个是值      sessionStorage.setItem('sessionName', 'John')      // 获取数据      sessionStorage.getItem('sessionName')      // 删除保存的数据      sessionStorage.removeItem('sessionName')      // 清除所有保存的数据      sessionStorage.clear()

延伸阅读1：cookie的CSRF攻击

跨站请求伪造（Cross-Site Request Forgery，简称CSRF）是指，攻击者可能利用网页中的恶意代码强迫受害者浏览器向被攻击的Web站点发送伪造的请求，篡夺受害者的认证Cookie等身份信息，从而假冒受害者对目标站点执行指定的操作。Firefox、Opera等浏览器使用单进程机制，多个窗口或标签使用同一个进程，共享Cookie等会话数据。IE则混合使用单进程与多进程模式，一个窗口中的多个标签，以及使用“CTRL+N” 或单击网页中的链接打开的新窗口使用同一进程，共享会话数据；只有直接运行IE可执行程序打开窗口时，才会创建新的进程。Chrome虽然使用多进程机制，然而经测试发现，其不同的窗口或标签之间仍会共享会话数据，除非使用隐身访问方式。因而，用户同时打开多个浏览器窗口或标签访问互联网资源时，就为CSRF攻击篡夺用户的会话Cookie创造了条件。另外，如果一个Web站点提供持久化Cookie，则CSRF攻击将更直接、更容易。