Cookie、sessionStorage和localStorage的区别是什么？

Niucode

已于 2024-04-29 09:33:48 修改

阅读量1.1k

点赞数 20

文章标签：前端 javascript web安全

于 2024-01-14 23:34:07 首次发布

本文链接：https://blog.csdn.net/Niucode/article/details/135585228

版权

Cookie、sessionStorage和localStorage都是在浏览器中存储数据的方式，但它们有一些重要的区别：

存储位置：
- Cookie：保存在客户端（浏览器）和服务器之间的通信中（下面有解释），可以设置一些属性，例如过期时间、域名限制（Domain）、路径限制、安全设置等，这些属性可以控制Cookie的行为和可访问性；
- sessionStorage：（开发组工具应用，会话储存空间）仅在当前会话期间有效，关闭浏览器标签页或窗口后会被清除；
- localStorage：（开发组工具应用，本地储存空间）长期有效，除非主动删除或清除浏览器缓存。
存储容量：
- Cookie：最大4KB，每个域名下的Cookie总数也有限制；
- sessionStorage和localStorage：通常可存储5MB或更多的数据。
与服务端通信或数据传输：
- Cookie：会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。在每次HTTP请求中都会发送到服务器端，增加网络流量。
- sessionStorage和localStorage：仅存储在客户端，是单纯的前端存储，不参与每次请求或服务端的通信。
访问权限：
- Cookie：具有域名和路径限制，可以设置为只在安全连接（HTTPS）上发送。
- sessionStorage和localStorage：受同源策略限制，只能在同一个域名下访问。
生命周期：
- Cookie：可以设置过期时间，可以在指定时间内保持有效。
- sessionStorage：仅在当前会话期间有效，关闭浏览器后会被清除。
- localStorage：长期有效，除非手动删除或清除浏览器缓存。
作用域不同：
- 即使同源，sessionStorage也不能在不同的窗口或者标签页中共享；localStorage在所有的同源窗口或标签页中都是共享的，cookie也是在所有同源窗口或标签页中共享的。

读写操作的便捷程度
1、cookie的相关操作，cookie操作起来较为繁琐，并且部分数据不可以读取操作。

<1>、cookie的读取

客户端读取Cookie的方式：document.cookie // 输出类似 "key1=value1; key2=value2; ..."

var x = document.cookie;

<2>、cookie的修改。document.cookie主要用于读取和修改现有的 Cookie，而不是直接创建全新的 Cookie。实际上，创建新的 Cookie 通常是由服务器通过 HTTP 响应头中的 Set-Cookie 字段来完成的。

JavaScript 中，修改 cookie 如下所示：
document.cookie="username=John Doe";
您还可以为 cookie 添加一个具体的过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

类型：Expires: Thu, 01 Jan 2025 00:00:00 GMT（具体过期时间） Cache-Control: max-age=3600（相对过期时间）要是同时存在的话max-age会覆盖Expires，以max-age为准。
可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

<3>、cookie的删除

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

2、sessionStorage的相关操作

<1>、存储一条数据 sessionStorage.setItem('数据名', '数据值');
<2>、读取一条数据 let data = sessionStorage.getItem('数据名');
<3>、清除一条数据 sessionStorage.removeItem('数据名');
<4>、移除所有数据 sessionStorage.clear();

3、localStorage的相关操作

<1>、存储一条数据 localStorage.setItem('数据名', '数据值');
<2>、读取一条数据 let data = localStorage.getItem('数据名');
<3>、清除一条数据 localStorage.removeItem('数据名');
<4>、移除所有数据 localStorage.clear();

对于浏览器的支持

1、cookie出现的时间较早，目前见到的浏览器都支持；

2、localStorage和sessionStorage出现的时间较晚，对于版本较低的浏览器不支持(比如IE8版本以下的都不支持)。

共同点：cookie、localstorage和sessionStorage三者都是在开发中用到的临时存储客户端会话信息或者数据的方法。

cookie数据始终携带在同源的http请求中，即cookie在浏览器和服务器间来回传递：

客户端向服务器发送HTTP请求。
服务器接收到请求后，在HTTP响应中包含一个名为"Set-Cookie"的标头。
浏览器接收到响应后，解析其中的"Set-Cookie"标头，并将其保存到本地的Cookie存储空间中。
在接下来的每次请求中，浏览器会自动将与当前域相关的Cookie信息添加到请求的"Cookie"标头中。
服务器在接收到请求时，读取"Cookie"标头中的信息，并根据这些信息进行相应的处理。

而sessionStorage和Localstorage不会自动把数据发送给服务器，只在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

Cookie的使用场景：

用户身份认证：Cookie经常用于在用户登录后识别用户身份。服务器在验证用户凭据后，可以生成带有用户标识信息的Cookie，并发送给浏览器。浏览器会将这个Cookie保存下来，在后续的请求中通过Cookie将用户标识信息发送回服务器，以进行身份验证和授权。
会话管理：Cookie可用于跟踪用户在网站上的会话状态。服务器可以创建一个唯一的会话ID，并将其存储在Cookie中。通过这种方式，服务器可以识别每个用户的会话，并存储相关的会话数据，如购物车内容、表单数据等。
用户偏好设置：Cookie可以用于存储用户的个性化偏好设置，例如语言首选项、主题选择、字体大小等。这样，在用户下次访问网站时，网站可以根据Cookie中的设置来提供相应的用户体验。
跟踪分析：在营销和广告领域，Cookie被广泛用于跟踪用户行为和分析网站流量。通过在用户访问网站时创建和存储特定的Cookie，可以收集关于用户的数据，如页面访问次数、停留时间、点击行为等，从而进行分析和改进网站的策略。
其他功能：除了上述场景外，Cookie还可以用于实现其他功能，如记住用户登录状态、保存用户输入的表单数据、记录用户的浏览历史等。

Cookie的安全设置属性：

Secure：指定Cookie只能通过HTTPS协议进行传输，防止在非加密的HTTP连接中被窃取。如果你的网站使用HTTPS协议进行通信，建议设置该属性为true，如下代码加上了Secure就视为设置该属性为true。
HttpOnly：限制Cookie只能通过HTTP或HTTPS协议访问，禁止被JavaScript等脚本语言读取（客户端就无法使用document.cookie来获取cookie的值）。这样可以有效防止跨站脚本攻击（XSS）窃取Cookie的情况发生。
SameSite：定义了Cookie的跨站点请求行为。可选值有三种：
- Strict：仅允许在同一站点发送Cookie，不接受任何第三方网站的请求。
- Lax：部分限制，只允许在导航到目标站点时发送Cookie，例如通过链接、预加载等方式。
- None：没有任何限制，允许在所有请求中发送Cookie。但必须同时设置Secure属性为true，以确保在HTTPS连接下使用。

设置这些属性的方式是在服务器端生成和返回Cookie时，只能在Set-Cookie头部信息中进行相应的配置。例如，设置Secure属性和HttpOnly属性可以这样写：

Set-Cookie: cookieName=value; Secure; HttpOnly;

采用cookie的安全设置属性解决带来网络安全问题的XSS攻击和GSRF攻击。

跨站脚本攻击（Cross-Site Scripting，XSS）是一种常见的网络安全漏洞，攻击者利用该漏洞可以将恶意脚本注入到受信任网站的页面中，使得这些脚本在用户浏览时执行。XSS攻击的原理主要涉及以下几个步骤：

注入：攻击者通过输入、提交或传递恶意数据（通常是HTML、JavaScript等代码）来注入恶意脚本。
存储：注入的恶意脚本被存储在目标网站的数据库或其他存储介质中，作为正常内容的一部分。
响应：当网站将存储的内容返回给用户浏览器时，恶意脚本也会被返回并在用户浏览器中执行。
漏洞利用：恶意脚本可以访问用户的敏感信息（如cookie、会话令牌），修改页面内容，重定向到恶意网站，甚至进行更多恶意操作。

攻击者可以通过各种方式进行XSS攻击，包括反射型XSS、存储型XSS和DOM-based XSS。攻击的成功依赖于网站未能正确过滤、转义或验证用户输入的数据，使得恶意脚本被执行。为了防止XSS攻击，开发人员应该采取以下措施：

输入验证和过滤：对用户输入的数据进行验证和过滤，确保只接受预期的数据类型和格式（正则、使用白名单过滤器）。
输出转义：在将用户输入显示到网页中时，对特殊字符进行转义，防止它们被解释为可执行代码。
使用安全的编码函数：使用适当的编码函数（如HTML实体编码、JavaScript编码）来处理用户输入和输出，防止注入攻击。
限制权限：为不同的用户角色和权限设置适当的访问控制，以防止攻击者利用XSS漏洞获取敏感信息或执行危险操作。

跨站请求伪造（Cross-Site Request Forgery，CSRF）攻击是一种利用用户身份进行非法操作的攻击方式。攻击者通过诱使用户访问恶意网站或点击恶意链接，来执行未经用户授权的操作，例如更改密码、发起转账等。CSRF攻击利用了用户在已登录的网站上的身份验证信息，通过伪造请求来执行攻击者想要的操作。

为了防御CSRF攻击，常见的方法是使用Anti CSRF Token（防止跨站请求伪造的令牌）。这个Token是在收到请求后由服务端利用UUID、时间戳和随机数、加密算法或JWT等方法随机生成的字符串，在服务端的session中存一份，利用HTTP响应头传递给客户端存起来，当客户端再次发起请求时嵌入到表单或请求中，服务器会验证Token的有效性，如果Token不匹配或不存在，服务器将拒绝该请求，从而防止CSRF攻击的发生。

然而，需要注意的是，仅仅使用CSRF Token并不能完全解决所有的安全问题。如果网站同时存在XSS（Cross-Site Scripting）漏洞，攻击者可以通过注入恶意脚本来绕过CSRF Token的防御。因此，在防御CSRF攻击时，还需要采取其他措施来防止XSS漏洞的利用，以综合提高网站的安全性。

根据需求的不同，你可以选择适当的存储方式。如果你需要在客户端和服务器之间共享数据，或者需要设置过期时间，那么使用Cookie是一个不错的选择。如果你需要在当前会话期间保持数据，可以选择sessionStorage。而如果你需要长期保存数据，即使关闭浏览器也不会丢失，可以选择localStorage。