Cookie、Web Storage介绍

宇豪学习录

已于 2024-09-12 17:17:46 修改

阅读量1k

点赞数 16

CC 4.0 BY-SA版权

分类专栏：各种小知识合集文章标签：前端

于 2024-09-12 17:17:05 首次发布

Cookie、LocalStorage、SessionStorage、IndexDB这些作为浏览器的存储入口，也是经典的八股文了，本文再次冷饭热吃来介绍这些API，主要是因为在其他文章中看到了一些个人感觉有用的小知识点，所以在这记录一下，以便有序复习浏览。不多逼逼，开始正文。

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据。浏览器会存储 cookie 并在下次向同一服务器再发起请求时携带并发送到服务器上。不同的请求方式对Cookie的处理不一样：

特性	Fetch API (`credentials`)	XMLHttpRequest (`withCredentials`)
默认值	`'same-origin'`	`false`
默认行为	同源请求中发送 Cookie；跨域不发送	不发送 Cookie（无论同源还是跨域）
发送同源 Cookie	默认发送	需要设置 `withCredentials = true`
发送跨域 Cookie	需要设置 `credentials: 'include'`	需要设置 `withCredentials = true`
不发送 Cookie	设置 `credentials: 'omit'`	默认行为 `false`

由于HTTP 协议是无状态的，对于服务器无法区分与其连接的客服端信息，所以引入了Cookie用以记录稳定的状态信息。Cookie是基于HTTP的，通常用于告知服务端区分两个请求是否来自同一浏览器。

Cookie主要有以下特点：

SameSite 属性值	描述	适用场景
Strict	Cookie 仅在同站点请求中发送，不会在任何第三方请求（如跨站点链接、表单提交、资源加载）中发送。	高安全性场景，防止所有跨站点请求携带 Cookie，如敏感数据的保护。
Lax(默认)	Cookie 在同站点请求中发送，并在部分跨站点请求（如通过链接导航的 GET 请求）中发送。