浏览器 - 本地存储

布莱克2026-05-26 21:49已编辑

Tip:文章封面与内容无关，作者旅游时拍摄，因为没什么值得把四季都错过！🌊 🌵 🌴 ✈️

Cookie

本质： HTTP协议的一部分，由服务器生成，客户端存储
生命周期：

会话Cookie：浏览器关闭时清除
持久Cookie：通过Expires或Max-Age设置过期时间存储大小： 4KB（每个域名）

作用域： 可设置domain和path进行限制，可跨子域

通信方式： 每次HTTP请求都会自动携带在请求头中

LocalStorage

本质： HTML5 Web Storage API的一部分
生命周期： 永久存储，除非手动清除或用户清除浏览器数据
存储大小： 5-10MB（不同浏览器有差异）
作用域： 同源策略限制，协议+域名+端口必须一致
通信方式： 仅在客户端操作，不参与服务器通信

SessionStorage

本质： HTML5 Web Storage API的一部分
生命周期： 仅当前会话有效（标签页或浏览器窗口）
存储大小： 5-10MB（不同浏览器有差异）
作用域： 同源且同一标签页/窗口
通信方式： 仅在客户端操作，不参与服务器通信

Cache Storage

Cache Storage 是浏览器提供的专门用于存储 HTTP 响应（Response）的存储 API，它是 Service Worker 实现离线缓存的核心基础设施

本质：浏览器提供的HTTP 缓存 API，是 Service Worker 的核心存储基础设施

生命周期：持久存储，除非手动清除、Service Worker 主动删除、或浏览器存储空间不足时自动清理

存储大小：很大（通常为磁盘可用空间的 50%+，单个站点可达几百 MB 甚至 GB 级）

作用域：同源策略限制，但可以通过 CORS 存储跨域资源（存储为不透明响应）

通信方式：仅在客户端操作（Service Worker 或页面 JS），不主动参与服务器通信，但存储的内容来自 HTTP 响应

维度	说明
本质	`window.caches` 对象，专门用于存储 `Request` → `Response` 的键值对
生命周期	• 数据永久保留，直到被显式删除 • 浏览器存储空间不足时，可能按 LRU（最近最少使用）策略自动清理 • 用户清除"站点数据"时会被删除
存储大小	• 无硬性上限，受磁盘可用空间限制 • Chrome 通常允许单个站点使用总磁盘空间的 50%+ • 超出配额时，浏览器会提示或自动清理
作用域	• 同源策略限制（协议+域名+端口必须一致） • 跨域资源可存储，但作为"不透明响应"（`type: 'opaque'`），内容不可读 • Service Worker 可以访问同源下所有 Cache Storage
通信方式	• 仅客户端操作（Service Worker 或普通 JS） • 不主动向服务器发送任何请求 • 存储的内容是静默的，不会自动上传或同步
存储内容	• 完整的 HTTP 响应对象（Response） • 包含状态码、响应头、响应体 • 可以存储任何类型（HTML、JS、CSS、图片、JSON 等）
操作方式	• 异步 API（Promise 或 async/await） • 不阻塞主线程
清理方式	• `caches.delete(cacheName)` 删除整个缓存库 • `cache.delete(request)` 删除单个条目 • `ExpirationPlugin` 自动按数量/时间清理

Cookie可以跨域吗？

Cookie默认遵循同源策略，可以通过Domine属性进行跨域

设置顶级域名共享Cookie

显式配置才能跨域携带Cookie

credentials: 'include'

设置cookie的有效期：

function setCookie(name, value, days) {
    const expires = new Date();
    //比如30天
    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;
}

Cookie属性设置：

// 完整属性列表
const cookieAttributes = {
    expires: '过期时间，GMT格式',
    maxAge: '最大存活时间，秒为单位',
    domain: '作用域名，可设置顶级域实现跨子域',
    path: '作用路径，默认当前路径',
    secure: '仅在HTTPS下发送',
    httpOnly: '禁止JavaScript访问，防止XSS',
    sameSite: '控制跨站请求是否发送Cookie'
};

web常见攻击以及防御手段

# XSS 跨站脚本攻击

将恶意脚本注入到网页中，当用户浏览被感染页面时，脚本自动执行，窃取用户cookie，会话令牌等敏感信息

防御：Set-Cookie: httpOnly 禁止js访问

内容安全策略：Content-Security-Policy: default-src 'self'; 限制网页只能加载来自当前域名的资源

# CSRF 跨站请求伪造

用户登录正常网站A，获得身份凭证，访问恶意网站B，网站b中隐藏请求网站A的接口，浏览器自动附加用户Cookie

防御：Set-Cookie: sameSite=strict 完全禁止第三方Cookie，双重cookie验证，请求时把cookie附加到请求头headeer中