[6-3] DOM/BOM 与宿主环境机制 · BOM API 与浏览器存储 (BOM & Storage)

所属板块：6. DOM/BOM 与宿主环境机制

记录日期：2026-03-xx
更新：遇到 BOM API 或存储方案对比题时补充

1. BOM（Browser Object Model）核心对象

BOM 是浏览器提供的全局 API 集合，以 window 为顶级对象。

• window：全局对象，包含 setTimeout、alert、requestAnimationFrame 等
• location：当前 URL 信息

  location.href          // 当前完整 URL
  location.search        // ? 后面的查询参数
  location.hash          // # 后面的 hash 值
  // 常用解析 URL 参数
  const params = new URLSearchParams(location.search);
  console.log(params.get('id'));
  

• history：浏览器历史记录（SPA 路由核心）

  history.pushState({ page: 1 }, '', '/new-url');   // 不会刷新页面
  history.replaceState(...);                        // 替换当前历史记录
  history.back();   // 后退
  

• navigator：浏览器和设备信息

  navigator.userAgent     // User-Agent 字符串
  navigator.platform      // 平台（Win32 / MacIntel 等）
  

2. 浏览器存储方案对比（高频考点）

存储方式	大小限制	是否随请求发送	生命周期	是否支持服务端读写	主要用途
Cookie	~4KB	是（每次 HTTP 请求自动携带）	可设置过期时间	是	身份认证、用户偏好
LocalStorage	~5MB	否	永久（除非手动清除）	否	长期本地数据（用户设置等）
SessionStorage	~5MB	否	当前标签页关闭即清除	否	临时会话数据（表单草稿等）
IndexedDB	很大（>250MB）	否	永久	否	大量结构化数据（离线应用）

Cookie 重要属性（安全相关）：

• HttpOnly：禁止 JS 读取，防止 XSS
• Secure：仅 HTTPS 传输
• SameSite=Strict/Lax/None：防御 CSRF

LocalStorage / SessionStorage 常用 API：

localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

3. 小结 & 复习时的“存储视角”

• BOM 是 JS 与浏览器交互的“门面”
• 存储方案选择核心依据：是否需要随请求发送 + 生命周期 + 容量
• Cookie 适合身份凭证，LocalStorage/SessionStorage 适合前端持久化，IndexedDB 适合离线大容量数据
• [6-2] 事件模型 + 本文的 BOM 存储 + 接下来的 [6-4] 网络通信与跨域，共同构成了浏览器宿主环境的完整交互体系

返回总目录：戳这里