JavaScript BOM、Web Storage与Cookie

目次
BOM（浏览器对象模型）
一、window 对象
1. 窗口控制
2. 定时器
二、location 对象
三、navigator 对象
四、history 对象
五、screen 对象
六、本地存储
1. localStorage
2. sessionStorage
七、BOM 应用场景
八、总结
Web Storage
一、核心概念
1. localStorage 与 sessionStorage 的对比
二、核心 API
1. 数据操纵
2. 存储限制
三、利用场景
四、安全性注意事项
Cookie
一、Cookie 概念与原理
1. Cookie 的基本概念
2. Cookie 的工作原理
3. Cookie 的属性
二、JavaScript 中的 Cookie 操纵
1. 写入 Cookie
2. 读取 Cookie
3. 删除 Cookie
三、Cookie 与 Web Storage 对比
四、应用场景
1. 利用 Cookie 的场景
2. 利用 Web Storage 的场景
五、安全注意事项
六、总结

---

BOM（浏览器对象模型）

   BOM（Browser Object Model）是浏览器提供的用于与浏览器窗口及情况交互的对象模型。与 DOM（文档对象模型）不同，BOM 的核心对象是 window，它答应开发者控制浏览器的行为（如导航、历史纪录、屏幕信息等）。
  

---

一、window 对象

window 是 BOM 的顶层对象，代表浏览器窗口，也是 JavaScript 的全局对象。
1. 窗口控制

方法/属性说明示例window.innerWidth视口宽度（不包罗滚动条）console.log(window.innerWidth)window.innerHeight视口高度（不包罗滚动条）console.log(window.innerHeight)window.open(url, name)打开新窗口window.open('https://example.com')window.close()关闭当前窗口（需用户操纵触发）window.close()window.resizeTo(w, h)调整窗口巨细window.resizeTo(800, 600) 2. 定时器

方法说明示例setTimeout(func, delay)延迟执行函数setTimeout(() => alert('Hi'), 1000)setInterval(func, delay)周期性执行函数setInterval(updateClock, 1000)clearTimeout(id)清除延迟任务clearTimeout(timerId)clearInterval(id)清除周期任务clearInterval(intervalId)

---

二、location 对象

location 包罗当前页面的 URL 信息，并答应操纵导航。
1. 常用属性
属性说明示例值location.href完整 URL"https://example.com/path?q=1"location.protocol协议（http:、https:）"https:"location.host主机名和端口"example.com:8080"location.pathnameURL 路径"/path"location.search查询参数（? 后的内容）"?q=1"location.hash哈希值（# 后的内容）"#section" 2. 常用方法
方法说明示例location.assign(url)加载新页面location.assign('new-page.html')location.reload()重新加载当前页面location.reload(true)（强制刷新）location.replace(url)更换当前页面（无历史纪录）location.replace('login.html')

---

三、navigator 对象

navigator 提供浏览器和操纵体系的信息。
属性/方法说明示例navigator.userAgent浏览器用户代理字符串"Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."navigator.platform操纵体系平台"Win32"、"MacIntel"navigator.language浏览器首选语言"zh-CN"navigator.geolocation地理位置 API（需用户授权）navigator.geolocation.getCurrentPosition(...)navigator.clipboard剪贴板操纵（读写文本/图片）navigator.clipboard.writeText('Hello')

---

四、history 对象

history 用于操纵浏览器会话历史纪录。
方法/属性说明示例history.length历史纪录条目数console.log(history.length)history.back()返回上一页（等同用户点击后退）history.back()history.forward()前进到下一页history.forward()history.go(n)跳转到历史纪录中的第 n 页history.go(-2)（后退两页）history.pushState()添加历史纪录（不刷新页面）history.pushState({}, '', '/new')history.replaceState()更换当前历史纪录（不刷新页面）history.replaceState({}, '', '/updated')

---

五、screen 对象

screen 提供用户屏幕的信息。
属性说明示例screen.width屏幕宽度（像素）1920screen.height屏幕高度（像素）1080screen.availWidth可用宽度（排除任务栏等）1900screen.availHeight可用高度1040screen.colorDepth颜色深度（位）24

---

六、本地存储

浏览器提供的本地存储 API（属于 BOM 的一部分）。
1. localStorage

• 恒久化存储：数据恒久保留（除非手动清除）。
  
• 作用域：同源窗口共享。
  
• 方法：
  
  1. localStorage.setItem('key', 'value'); // 存储数据
  2. const value = localStorage.getItem('key'); // 读取数据
  3. localStorage.removeItem('key'); // 删除数据
  4. localStorage.clear(); // 清空所有数据

  复制代码

2. sessionStorage

• 会话级存储：数据在标签页关闭后清除。
  
• 作用域：仅当前标签页有用。
  
• 方法：同 localStorage。
  

---

七、BOM 应用场景

• 页面跳转与刷新：
  
  1. // 跳转到新页面
  2. location.href = 'https://example.com';
  3. // 刷新当前页面
  4. location.reload();

  复制代码
• 浏览器信息检测：
  
  1. // 判断是否为移动端
  2. const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

  复制代码
• 历史纪录管理：
  
  1. // 单页应用（SPA）路由控制
  2. history.pushState({ page: 1 }, 'Page 1', '/page1');

  复制代码
• 屏幕适配：
  
  1. // 根据屏幕宽度调整布局
  2. if (window.innerWidth < 768) {
  3.   document.body.classList.add('mobile-mode');
  4. }

  复制代码

---

八、总结

对象核心功能典型用途window窗口控制、定时器、全局对象调整窗口巨细、定时任务locationURL 操纵与页面导航页面跳转、获取 URL 参数navigator浏览器/设备信息设备检测、地理位置获取history历史纪录管理单页应用路由控制screen屏幕信息获取响应式布局适配localStorage本地恒久化存储用户偏好设置、缓存数据

---

   
Web Storage

   Web Storage 是现代浏览器提供的一种客户端存储机制，答应在用户的浏览器中存储键值对数据。它包罗两种主要对象：localStorage 和 sessionStorage。
  

---

一、核心概念

1. localStorage 与 sessionStorage 的对比

特性localStoragesessionStorage生命周期永世存储，除非手动删除或清除浏览器数据会话级存储，关闭标签页或浏览器后失效作用域同一域名下全部页面共享仅在当前标签页有用数据共享跨标签页共享仅限当前标签页实用场景恒久保存用户偏好（如主题、语言）临时保存会话数据（如表单草稿）

---

二、核心 API

1. 数据操纵

• 写入数据：
  
  1. localStorage.setItem('key', 'value');       // 存储字符串
  2. localStorage.setItem('user', JSON.stringify({ name: 'John' })); // 存储对象

  复制代码
• 读取数据：
  
  1. const value = localStorage.getItem('key'); // 返回字符串或 null
  2. const user = JSON.parse(localStorage.getItem('user')); // 解析对象

  复制代码
• 删除数据：
  
  1. localStorage.removeItem('key');  // 删除指定键
  2. localStorage.clear();            // 清空所有数据

  复制代码

2. 存储限制

• 容量：通常为 5MB/域名（不同浏览器大概不同）。
  
• 数据类型：仅支持字符串，存储对象需用 JSON.stringify() 转换。
  

---

三、利用场景

1. localStorage 的典型用途

• 用户偏好设置（如主题、语言、字体巨细）。
  
• 离线缓存（存储静态资源或 API 响应，需配合 Service Worker）。
  
• 恒久登录状态（结合 Token 实现“记住我”功能）。
  

2. sessionStorage 的典型用途

• 表单草稿（防止页面刷新导致数据丢失）。
  
• 单页应用（SPA）的临时状态（如路由跳转时的中间数据）。
  
• 敏感操纵的一次性验证（如支付流程的临时 Token）。
  

---

四、安全性注意事项

1. XSS 攻击风险

• 问题：若网站存在 XSS 毛病，攻击者可读取/窜改 Web Storage 数据。
  
• 防御步伐：
  
  
  
  • 制止存储敏感信息（如暗码、信用卡号）。
    
  • 对存储的数据加密（如利用 AES 算法）。
    
  • 设置 HttpOnly 和 Secure 的 Cookie 存储敏感 Token。
    
  
  

2. 安全实践

1. // 加密存储示例（使用 crypto-js）
2. import CryptoJS from 'crypto-js';
4. const secretKey = 'your-secret-key';
5. const data = { username: 'John', role: 'admin' };
7. // 加密
8. const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), secretKey).toString();
9. localStorage.setItem('encryptedData', encryptedData);
11. // 解密
12. const decryptedData = CryptoJS.AES.decrypt(localStorage.getItem('encryptedData'), secretKey).toString(CryptoJS.enc.Utf8);
13. console.log(JSON.parse(decryptedData));

复制代码

---

   
Cookie

---

一、Cookie 概念与原理

1. Cookie 的基本概念

• 定义：Cookie 是由服务器发送到用户浏览器并保存在本地的小型文本数据（通常不超过 4KB），用于在客户端存储会话或用户相干信息。
  
• 核心功能：
  
  
  
  • 会话管理：保持用户登录状态（如 Token）。
    
  • 个性化设置：保存用户偏好（如语言、主题）。
    
  • 行为跟踪：纪录用户访问行为（常用于广告追踪）。
    
  
  

2. Cookie 的工作原理

• 服务端生成：服务器通过 HTTP 响应头 Set-Cookie 发送 Cookie 到浏览器。
  
  1. HTTP/1.1 200 OK
  2. Set-Cookie: session_id=abc123; Expires=Wed, 21 Oct 2025 07:28:00 GMT; Path=/; Secure; HttpOnly

  复制代码
• 客户端存储：浏览器根据指令保存 Cookie。
  
• 自动回传：后续哀求中，浏览器通过 Cookie 哀求头将数据发送到服务器。
  
  1. GET /dashboard HTTP/1.1
  2. Cookie: session_id=abc123; theme=dark

  复制代码

3. Cookie 的属性

属性作用Name/Value键值对，存储现实数据。Expires设置过期时间（绝对时间），过期后 Cookie 失效。Max-Age设置存活时间（秒级），优先级高于 Expires。Domain指定 Cookie 生效的域名（默认为当前域名，子域名需显式指定）。Path限制 Cookie 仅在指定路径下生效（如 /admin）。Secure仅通过 HTTPS 协议传输 Cookie。HttpOnly克制 JavaScript 访问 Cookie，防止 XSS 攻击。SameSite控制跨站哀求时是否发送 Cookie（值：Strict/Lax/None）。

---

二、JavaScript 中的 Cookie 操纵

1. 写入 Cookie

1. // 设置 Cookie（默认会话级，关闭浏览器失效）
2. document.cookie = "username=John; path=/; max-age=3600";
4. // 设置带过期时间的 Cookie
5. const expires = new Date();
6. expires.setDate(expires.getDate() + 7);
7. document.cookie = `theme=dark; expires=${expires.toUTCString()}; path=/`;

复制代码

2. 读取 Cookie

1. // 获取所有 Cookie（字符串形式）
2. const cookies = document.cookie; // "username=John; theme=dark"
4. // 解析为对象
5. const cookieObj = cookies.split('; ').reduce((acc, item) => {
6.   const [key, value] = item.split('=');
7.   acc[key] = decodeURIComponent(value);
8.   return acc;
9. }, {});
11. console.log(cookieObj.username); // "John"

复制代码

3. 删除 Cookie

1. // 将过期时间设为过去的时间
2. document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

复制代码

---

三、Cookie 与 Web Storage 对比

特性Cookie                 Web Storage
(localStorage/sessionStorage)
存储容量约 4KB通常 5MB+数据生命周期可设置过期时间或会话级 localStorage：永世存储
sessionStorage：会话级
自动发送到服务器是（通过 HTTP 哀求头）否可访问性服务器和客户端均可访问（除非 HttpOnly）仅客户端访问API 易用性需手动剖析字符串提供 setItem/getItem 等简单方法安全性支持 Secure（HTTPS 传输）和 HttpOnly易受 XSS 攻击，需开发者自行加密实用场景会话管理、服务器需要的数据（如 Token）客户端缓存、离线数据

---

四、应用场景

1. 利用 Cookie 的场景

• 用户认证：存储 Session ID 或 Token（建议标记 HttpOnly 和 Secure）。
  
• 跨页面状态保持：如购物车中的临时数据。
  
• 服务端渲染（SSR）：传递用户标识到服务器。
  

2. 利用 Web Storage 的场景

• 客户端缓存：存储大量静态数据（如用户偏好、本地草稿）。
  
• 离线应用：结合 Service Worker 实现离线资源缓存。
  
• 制止不必要的网络传输：保存不涉及服务器交互的数据。
  

---

五、安全注意事项

• Cookie 安全：
  
  
  
  • 敏感信息（如 Token）应设置 HttpOnly 和 Secure。
    
  • 利用 SameSite=Lax 或 Strict 防御 CSRF 攻击。
    
  
  
• Web Storage 安全：
  
  
  
  • 制止存储敏感数据（如暗码）。
    
  • 对存储的数据加密（如 AES 加密）。
    
  
  

---

六、总结

• Cookie：适合小规模、需与服务器交互的数据（如认证信息），但需注意安全设置。
  
• Web Storage：适合大规模、纯客户端存储（如用户设置），需防范 XSS 风险。
  
• 现代替换方案：对于复杂场景，可结合 IndexedDB（布局化存储）或服务端 Token（如 JWT）优化体验。
  

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。