【重读红宝书系列】第25章-客户端存储

140 阅读2分钟

1、cookie

HTTP cookie 通常也叫作 cookie,最初用于在客户端存储会话信息(例如用户ID),服务器通过响应头 Set-Cookie 携带会话信息。 浏览器会存储这些会话信息,在之后的每个请求中,浏览器通过请求头 cookie 再将它们发回服务器。

豆包携带的cookie:

豆包发送的cookie:

注意:

1、cookie出现的时间很早,已经成为了浏览器标准的一部分,因此浏览器请求时会自动携带。而Bearer Token 出现较晚,不是浏览器的标准,因此需要前端每次请求时手动携带,例如放到请求头Authorization 中

2、cookie一般搭配服务端的 session 一起使用

3、同一域名下,不同tab页的 cookie 是共享的

4、前端可通过 document.cookie 对 cookie 增、删、改、查,但服务端会校验修改后的 cookie

5、前端安全:

后端通过响应头 set-cookie 给指定 cookie 开启 HTTP Only ,前端就无法通过 document.cookie 读取 cookie,因此 HTTP Only 标记可用于预防 XSS 攻击

后端通过响应头 set-cookie 给指定 cookie 设定 SameSite 等级,例如 Lax、Strict、None,该属性能限制浏览器自动携带cookie,因此 SameSite 登记可用于预防 CSRF 攻击

2、Web Storage

Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用 cookie 的问题。

Web Storage 定义了两个对象:localStorage 和 sessionStorage。localStorage 是永久存储机制,sessionStorage 是会话存储机制。两种机制都不受页面刷新的影响。

区别:

sessionStorage 的数据在浏览器tab页关闭时失效;

localStorage 的数据只有在手动清除时才失效;

同一域名下,不同tab页的 sessionStorage、localStorage 是共享的

storage事件

****每当 Storage 对象发生变化时,都会触发 storage 事件。使用属性或 setItem()设置值、使用 delete 或 removeItem()删除值,以及每次调用 clear()时都会触发这个事件。

通过监听这个事件,同一域名下的不同tab页可实现跨页面通信

window.addEventListener("storage", 
 (event) => alert('Storage changed for ${event.domain}')
);