浏览器存储(cookie,localStorage,sessionStorage)

三者区别

共九个方面

1、存储大小cookie数据大小一般不超过4k

sessionStoragelocalStorage一般可以达到5M或更大

2、存储类型:Cookie,类型为「小型文本文件」,指某些网站为了辨别用户身份而由服务器发送储存在用户本地终端上的数据,由一个名称(Name)、一个值(Value)和其它几个用于控制 cookie有效期、安全性、使用范围的可选属性组成;localStorage本质上是对字符串的读取;其实都是存的字符串

3、有效时间localStorage存储持久数据,浏览器关闭后数据不丢失除非主动删除数据; sessionStorage数据在当前浏览器窗口关闭后自动删除;

cookie设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

4、数据与服务器之间的交互方式cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端; sessionStoragelocalStorage不会自动把数据发给服务器,仅在本地保存

localStorage内的数据要想实现通信,需要手动将存储在 LocalStorage 中的 JWT(JSON Web Token) 或其他凭证读取出来,并附加到请求的 Authorization 头中发送给服务器发送给服务器

5、应用场景:

  • 标记用户与跟踪用户行为的情况,推荐使用cookie,例如每次用户访问页面时,获取之前存储的访问次数Cookie

  • 适合长期保存在本地的数据,存储不敏感、不需要频繁同步的应用数据,推荐使用localStorage

6、安全性上:

cookie在每次请求中都会被发送,如果不使用 HTTPS并对其加密,其保存的信息很容易被窃取,导致安全风险。举个例子,在一些使用 cookie保持登录态的网站上,如果 cookie被窃取,他人很容易利用你的 cookie来假扮成你登录网站

  • 通过Secure 属性表示该Cookie只能通过HTTPS协议传输,能提高安全性。

  • HttpOnly 属性表示该Cookie不能通过JavaScript访问,防止跨站脚本攻击(XSS)

  • SameSite 属性不设置none可以防止 CSRF 攻击,即使设为none,也可以通过CSRF token(服务端生成)防止

LocalStorage 最大的安全隐患是它容易受到 XSS(跨站脚本攻击) 的影响。由于 LocalStorage 可以被 JavaScript 直接访问,如果网站存在 XSS 漏洞,攻击者可以通过恶意脚本读取存储在 LocalStorage 中的 JWT,从而窃取用户身份。

7、跨域上

localStorage受同源策略限制

cookie可以通过设置SameSite 属性选择是否跨域

  • SameSite 是一个针对Cookie的安全属性,可以限制第三方Cookie的使用。通过设置 SameSite=Strict (只能在同源请求时发送)或 SameSite=Lax(大部分同源请求会发送 Cookie,但外部站点的 GET 请求不会发送 Cookie),站点可以防止Cookie在跨域请求时被发送,增加安全性并减少跨站点跟踪。设置None就是允许跨域访问

8、持久化

cookie:通过 ExpiresMax-Age 属性设置 Cookie 的过期时间,以实现持久化。

LocalStorage 中的数据默认具有持久性

9、灵活性:

cookie在所有请求自动携带,即使是不需要身份验证的请求,比如获取公共资源的请求(图片、静态文件那些)

LocalStorage 中的 Token 不会自动附加到请求中,开发者可以手动决定在哪些请求中需要附加 Token,避免在公共资源请求中携带多余的信息,避免了带宽浪费


避免 Cookie 在不需要身份验证的请求中自动携带的方法:

设置 Cookie 的 Path 属性或使用 SameSite 属性

domainpath 属性可以同时设置,并且不会相互冲突。domain 控制的是在哪个子域名下发送 Cookie,而 path 控制的是该域名下哪些路径可以发送 Cookie。

// 在 secure.example.com 子域名下设置身份验证 Cookie
res.cookie('authToken', token, {
    maxAge: 7 * 24 * 60 * 60 * 1000,  // 7天有效期
    httpOnly: true,  // 防止通过 JavaScript 访问
    secure: true,    // 仅限 HTTPS 传输
    domain: 'secure.example.com',  // 仅限 secure 子域名
    path: '/' // 对整个 secure 子域名下的所有路径有效
});

### 3.1 CookieLocalStorageSessionStorage 的区别 CookieLocalStorageSessionStorage前端开发中常用的浏览器存储方式,它们在存储容量、生命周期、跨域行为和数据交互等方面存在显著差异。 Cookie存储容量较小,通常为 4KB 左右,且每次请求都会自动随 HTTP 请求头发送到服务器端,这可能导致额外的网络流量开销。Cookie 支持设置过期时间,默认情况下为会话级别(即关闭浏览器后失效)。由于其跨域能力较强,且能与服务器进行交互,因此适用于会话管理和身份认证等场景[^1]。 LocalStorage存储容量较大,通常为 5MB 左右,且不会随请求自动发送到服务器。LocalStorage 没有过期时间限制,数据会一直保留在本地,直到手动清除或调用 `localStorage.clear()` 方法。由于其存储空间大、本地存储稳定,适用于持久化存储和离线应用,例如 H5 小游戏中的本地数据保存[^3]。 SessionStorageLocalStorage 的使用方式相同,但其生命周期仅限于当前会话,关闭浏览器标签页后数据会被清除。SessionStorage 也具备本地存储的优势,不会与服务器发生交互,适用于临时存储和多页面通信场景,例如在多个标签页之间共享临时状态[^2]。 ### 3.2 使用场景对比 | 存储方式 | 容量限制 | 生命周期 | 是否跨域 | 是否随请求发送 | 适用场景 | |---------------|----------|------------------|----------|----------------|------------------------------------| | Cookie | 4KB 左右 | 可设置或会话级 | 支持 | 是 | 会话管理、身份认证、跨域通信 | | LocalStorage | 5MB 左右 | 永久(手动清除) | 不支持 | 否 | 持久化存储、离线应用、本地数据缓存 | | SessionStorage| 5MB 左右 | 会话级(关闭标签清除) | 不支持 | 否 | 临时存储、多页面通信 | LocalStorageSessionStorage 的使用方式类似,例如: ```javascript // 存储数据 localStorage.setItem('key', 'value'); sessionStorage.setItem('tempKey', 'tempValue'); // 获取数据 const value = localStorage.getItem('key'); const tempValue = sessionStorage.getItem('tempKey'); // 删除数据 localStorage.removeItem('key'); sessionStorage.removeItem('tempKey'); // 清空所有数据 localStorage.clear(); sessionStorage.clear(); ``` Cookie 的使用方式则涉及设置 `document.cookie`,例如: ```javascript document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/"; ``` Cookie 与服务器交互的特性使其在身份认证中具有天然优势,而 LocalStorageSessionStorage 则更适合本地数据管理,避免不必要的网络流量消耗[^5]。 ### 3.3 选择建议 在实际开发中,应根据具体需求选择合适的存储方式。如果需要与服务器保持状态同步,如用户登录、会话管理等,应优先使用 Cookie。如果需要在客户端存储大量数据且不希望影响网络性能,应使用 LocalStorageSessionStorageLocalStorage 更适合长期存储,而 SessionStorage 更适合临时数据或页面间通信[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值