浏览器存储

大家好，我是半虹，这篇文章我们来讲浏览器存储

---

1、概述

概括地说，浏览器的存储方式可以分为两种，一是 Web Storage，二是 HTTP Cookie

其中，Web Storage 又能分为 Local Storage 、Session Storage

2、HTTP Cookie

Cookie 在设计之初并不是用于数据存储，而是为了与服务端进行通信

Cookie 本质上其实是一个电脑本地文件，其以键值对的形式保存数据 (就是 SQLite 格式)

例如，Chrome Cookie 的默认保存路径：(Windows 10 + Chrome 114.0.5735.199)

C:\Users\<UserName>\AppData\Local\Google\Chrome\User Data\Default\Network\Cookies

通常都是由服务器生成 Cookie ，发送给浏览器并由浏览器维护， 过程 如下：

1. 浏览器第一次请求服务器时，服务器会在响应头添加 Set-Cookie 选项，用于指定 Cookie 的值
2. 浏览器在收到对应的响应后，浏览器根据该选项设置 Cookie
3. 浏览器之后再请求服务器时，浏览器会在请求头带上 Cookie ( 这仅限于：同源请求 )

上述过程是 Cookie 最经典的使用场景，通常来说，会在 Cookie 中保存用户的身份信息

这样再通过 Cookie 的传递，服务器就能知道请求的来源 ， 并对 客户端的状态进行维护

当然，除了通过响应头设置 Cookie 外，浏览器也有提供操作 Cookie 的 API，例子如下：

document.cookie = "key1=value1"
document.cookie = "key2=value3"
document.cookie = "key2=value2"

console.log(document.cookie) // key1=value1; key2=value2

// 1. 如果对 document.cookie 直接赋值，那么并非覆盖，而是叠加
// 2. 如果在 document.cookie 的键相同，后者覆盖前者

通过 document.cookie，我们可以对 Cookie  进行读写操作

虽然 Cookie 通过字符串来进行设置，但其行为更类似于对象

除了键值之外， Cookie 还可以设置其他的属性，每个 Cookie 具有属性如下：

属性	说明
Name	Cookie 的键 (必填) ，一旦创建，不可更改
Value	Cookie 的值 (必填) ，该值对应着上述名称
Domain	Cookie 的有效域名，也对子域名有效，其默认设置为：请求地址的 domain
Path	Cookie 的有效路径，也对子路径有效，其默认设置为：/
Expires / Max-age	Cookie 的有效期限 Expires 绝对时间，设置为时间戳，在该时间后 Cookie 失效 Max-age 相对时间，设置为秒数，经过该秒数后 Cookie 失效 Expires 格式为GMT，且该时间戳是服务器时间，若不设置则在页面关闭时失效 Max-age 设置为零值，则马上失效；设置为负数，在页面关闭时失效；默认 -1 Max-age 优先级要比  Expires 高
Size	Cookie 的大小，若该大小超过浏览器限制的大小，则会被忽略
HttpOnly	布尔值，是否阻止通过脚本更改值 (即 document.cookie)
Secure	布尔值，是否只在安全协议中使用 (如 HTTPS)
SameSite	用于限制第三方 Cookie，具体可参考 阮一峰的博客

其中键值以 键=值 的形式出现，其余属性以 属性名=属性值 的形式出现，不同属性间之用 ; 分割

例如 Set-Cookie: token=value; Expires=Tue, 04 Jul 2023 07:55:26 GMT; HttpOnly

虽然 Cookie 应用广泛，但也并非完全没有缺点，常见缺点如下：

1. 体积有限：每个被设置的 Cookie 体积有限，一般只有 4KB，故只能存储少量信息
2. 数量有限：每个域名下的 Cookie 数量有限，不同浏览器的限制不同，若超过数量，之前的会被清除
3. 性能损耗：每次请求都会携带相同域名下面的所有  Cookie，会带来很多额外传输
4. 安全问题：容易受到攻击进而带来安全问题，例如  XSS、CSRF 等等

3、Web Storage

WebStorage 是浏览器常用的数据存储方案之一，具体分为两类：Session Storage 和 Local Storage

上述二者皆可用于数据存储，但却有着不同特性，具体体现如下：

1. 有效期限

   Session Storage 仅在当前会话有效，在浏览器窗口关闭之前，即使页面刷新依然可用

   而 Local Storage 一旦写入永久有效，除非主动删除，否则甚至浏览器关闭也一直存在

2. 共享范围

   Session Storage 在当前窗口中共享，若在当前窗口打开新页面可共享，但在新的窗口打开就不可以

   而 Local Storage 在同源窗口中共享，遵守同源策略

而具体到如何对 Web Storage 进行读写，浏览器也提供相应的 API

对应 API 挂载在 window 对象 下，也即 window.sessionStorage 和 window.localStorage

二者都是对象，常用的属性和 方法 如下：

属性 / 方法	说明
length	获取已有 cookie 的数量
setItem(key, value)	设置特定 cookie 项
getItem(key)	获取特定 cookie 项
removeItem(key)	删除特定 cookie 项
clear()	删除所有 cookie 项

4、异同

在文章最后，我们整体比较一下三种存储方式的异同：

	cookie	sessionStorage	localStorage
与服务端的通信	在同源请求中都会携带	不与服务端通信	不与服务端通信
数据的生命周期	设置的失效时间前有效	在浏览器关闭前有效	永久有效，除非主动删除
数据的作用范围	设置的域名及其子域名	在当前窗口共享	在同源窗口共享
储存的数据大小	一般不超过 4KB	一般在 5MB 左右	一般在 5MB 左右

---

好啦，本文到此结束，感谢您的阅读！

如果你觉得这篇文章有需要修改完善的地方，欢迎在评论区留下你宝贵的意见或者建议

如果你觉得这篇文章还不错的话，欢迎点赞、收藏、关注，你的支持是对我最大的鼓励 (/ω＼)