JavaScript 客户端存储生态：从 Cookie 到 Storage Buckets

摘要

现代单页应用 (SPA) 和渐进式 Web 应用 (PWA) 的发展，推动了客户端数据持久化方案的深刻变革。从最初仅有 4 KB 容量的 Cookie，演化至今，浏览器已拥有一套复杂且高效的异步存储 API 生态，能够在不阻塞主线程的前提下处理大量数据。

本文深入剖析各种存储接口的技术特性、适用场景与安全边界，并给出 Angular 19 中的同构响应式实战设计。

1. 存储机制的演进与隔离模型

在 Web 早期，Cookie 是唯一的持久化手段。然而其容量微小且每次 HTTP 请求都会自动携带，极易造成网络开销，无法满足复杂应用的状态存储需求。

1.1 Web Storage API: Local vs. Session

为了解决 Cookie 的局限，Web Storage API 引入了两种核心机制：

sessionStorage：二维隔离。数据按“源 (Origin)”和“浏览上下文（标签页）”进行隔离。支持页面刷新后保留，但关闭标签页时会被自动销毁。
localStorage：一维隔离。数据在同一源下的所有标签页间共享，且永久保存，除非被手动或代码显式清除。

1.2 主线程阻塞瓶颈

Web Storage API 最显著的缺陷在于其完全同步的读写机制。所有的 I/O 操作都会直接阻塞主线程。在高性能应用中，同步序列化与写入大型 JSON 对象极易引发长任务 (>50ms)，从而对 INP (Interaction to Next Paint) 性能指标产生负面影响。此外，~5 MiB 的容量硬上限要求开发者在写入时必须使用 try...catch 捕捉 QuotaExceededError 异常。

2. 跨标签页状态同步：StorageEvent

storage 事件为多标签页之间的状态联动提供了原生支持。当某一标签页修改了同源下的 localStorage 时，其他标签页会收到通知：

window.addEventListener('storage', (event) => {
  console.log(`修改的 Key: ${event.key}`);
  console.log(`旧值: ${event.oldValue}`);
  console.log(`新值: ${event.newValue}`);
});

该机制是实现多标签页同步退出登录或实时更新用户偏好设置的理想选择。

3. Storage API：配额管理与持久化

随着存储技术的多元化，浏览器引入了 Storage API 作为统一的管理控制层。

3.1 动态配额查询

通过 navigator.storage.estimate()，开发者可以动态查询当前源的已用空间与可用配额：

async function debugStorage() {
  const { usage, quota } = await navigator.storage.estimate();
  const percentage = ((usage / quota) * 100).toFixed(2);
  console.log(`存储已用: ${percentage}% (${Math.round(usage / 1e6)} MB / ${Math.round(quota / 1e6)} MB)`);
}

3.2 持久化存储申请

默认情况下，浏览器对存储数据的管理遵循“尽力而为 (best-effort)”原则（当磁盘空间紧张时，可能通过 LRU 算法清除数据）。对于离线优先的关键应用，可通过 navigator.storage.persist() 申请将存储标记为持久化 (Persisted)，免受自动垃圾回收的影响。

4. Storage Buckets API：精细化分级管理

为了打破“全有或全无”的存储管理僵局，Storage Buckets API 允许开发者将数据划分到多个逻辑上独立的“存储桶 (Bucket)”中，从而实现清理优先级的精细控制。

4.1 桶配置与硬件持久性

在创建存储桶时，可以为其指定不同的保留策略：

const draftsBucket = await navigator.storageBuckets.open('drafts_critical', {
  durability: 'strict', // 强制立即刷入物理磁盘
  persisted: true       // 保护该桶不受自动清除策略影响
});

每个存储桶内部均可统一组织 IndexedDB、CacheStorage 与 OPFS (Origin Private File System) 数据。

为遏制跨站追踪行为，现代浏览器推出了存储分区 (Storage Partitioning) 机制。然而，某些正当业务场景（如单点登录 SSO 或微前端）仍需要跨站数据交互。

5.1 Storage Access API 与 RWS

Storage Access API 提供了一套标准的安全机制，允许嵌入的 iframe 在获得用户显式授权（交互触发）后访问其顶级 Cookie。

同时，针对同一企业旗下的关联域名，Related Website Sets (RWS) 允许通过密码学声明组建关联域名集合，使得浏览器在校验后能够自动批准存储访问权限。

6. 安全防护：抵御 XSS 攻击

保存在 localStorage 中的敏感数据极易受到 XSS (跨站脚本攻击) 的威胁。任何被注入的脚本只需两行代码即可提取 localStorage 中的全部信息。

6.1 深度防御策略

将 Token 存入 HttpOnly Cookie：禁止 JavaScript 访问敏感 Token，彻底消除脚本窃取风险。
启用 Trusted Types：严格限制不安全的字符串拼接，防止 DOM XSS 漏洞的产生。
配置 Content Security Policy (CSP)：限制非法脚本的加载与执行。

7. Angular 19 中的响应式存储服务实现

在企业级前端架构中，直接在 UI 组件中调用原生存储 API 是一种反模式。我们需要抽象出同构的服务层以支持 SSR（服务端渲染）。

7.1 响应式存储服务

结合 InjectionToken、Zod 模式校验与 Angular 的 Signals 响应式原语：

import { z } from 'zod';
import { signal, computed, inject, InjectionToken, PLATFORM_ID, Injectable } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

const ConfigSchema = z.object({
  theme: z.enum(['light', 'dark']).default('dark'),
  notifications: z.boolean().default(true)
});

export const BROWSER_STORAGE = new InjectionToken<Storage | null>('Storage', {
  factory: () => isPlatformBrowser(inject(PLATFORM_ID)) ? window.localStorage : null
});

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private storage = inject(BROWSER_STORAGE);
  private _state = signal(this.loadInitial());

  public config = computed(() => this._state());

  private loadInitial() {
    if (!this.storage) return ConfigSchema.parse({});
    try {
      const data = JSON.parse(this.storage.getItem('app-config') || '{}');
      return ConfigSchema.parse(data);
    } catch {
      return ConfigSchema.parse({});
    }
  }

  public update(partial: Partial<z.infer<typeof ConfigSchema>>) {
    const next = ConfigSchema.parse({ ...this._state(), ...partial });
    this._state.set(next);
    this.storage?.setItem('app-config', JSON.stringify(next));
  }
}

8. 总结

客户端存储已从最初简单的键值对发展成为高度复杂的资源管理系统。拥抱异步流、合理划分存储等级并辅以严密的安全防护，是构建现代高性能 Web 应用的必备基石。

参考来源：W3C Storage Standard 规范、Google Privacy Sandbox 开发者文档、MDN Web 文档。

摘要