JavaScript BOM核心对象、本地存储

BOM 核心对象详解

一、location 对象

1. 常用属性

2. 常用方法

3. 应用场景

二、navigator 对象

1. 核心属性

2. 常用方法

3. 应用场景

三、history 对象

1. 核心属性和方法

2. 应用场景

四、兼容性与注意事项

五、总结

本地存储与复杂数据类型处理

一、本地存储简介

二、基础操作

1. 存储简单数据类型

2. 存储限制与检测

三、处理复杂数据类型

1. 存储对象或数组

2. 处理特殊数据类型

四、高级技巧与最佳实践

1. 数据版本控制

2. 存储事件监听

3. 加密敏感数据

4. LRU 缓存策略

五、替代方案对比

六、总结

BOM 核心对象详解

一、`location` 对象

location 用于 获取或操作当前页面的 URL，支持导航到新页面。

1. 常用属性

属性	说明	示例值
`href`	完整 URL	`"https://example.com/path?q=1"`
`protocol`	协议（`http:`、`https:`）	`"https:"`
`host`	主机名和端口	`"example.com:8080"`
`hostname`	主机名（不含端口）	`"example.com"`
`port`	端口	`"8080"`
`pathname`	URL 路径	`"/path"`
`search`	查询参数（`?` 后的内容）	`"?q=1"`
`hash`	哈希值（`#` 后的内容）	`"#section"`

2. 常用方法

方法	说明	示例
`assign(url)`	跳转到新页面（保留历史记录）	`location.assign('new-page.html')`
`replace(url)`	替换当前页面（无历史记录）	`location.replace('login.html')`
`reload(force)`	重新加载页面	`location.reload(true)`（强制刷新）

3. 应用场景

<body>
  <form>
    <input type="text" name="search"> <button>搜索</button>
  </form>
  <a href="#/music">音乐</a>
  <a href="#/download">下载</a>

  <button class="reload">刷新页面</button>
  <script>
    // location 对象  
    // 1. href属性 （重点） 得到完整地址，赋值则是跳转到新地址
    console.log(location.href)
    // location.href = 'http://www.itcast.cn'

    // 2. search属性  得到 ? 后面的地址 
    console.log(location.search)  // ?search=笔记本

    // 3. hash属性  得到 # 后面的地址
    console.log(location.hash)

    // 4. reload 方法  刷新页面
    const btn = document.querySelector('.reload')
    btn.addEventListener('click', function () {
      // location.reload() // 页面刷新
      location.reload(true) // 强制页面刷新 ctrl+f5
    })
  </script>
</body>

二、`navigator` 对象

navigator 提供 浏览器和操作系统信息，支持设备能力检测。

1. 核心属性

属性	说明	示例值
`userAgent`	浏览器用户代理字符串	`"Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."`
`platform`	操作系统平台	`"Win32"`、`"MacIntel"`
`language`	浏览器首选语言	`"zh-CN"`
`onLine`	是否联网	`true`
`geolocation`	地理位置 API	`navigator.geolocation.getCurrentPosition(...)`

2. 常用方法

方法	说明	示例
`geolocation.getCurrentPosition()`	获取当前位置（需用户授权）	`navigator.geolocation.getCurrentPosition(showPosition)`
`clipboard.writeText()`	写入剪贴板（需 HTTPS 和用户授权）	`navigator.clipboard.writeText('Hello')`
`vibrate()`	触发设备震动（移动端）	`navigator.vibrate(200)`

3. 应用场景

// 检测 userAgent（浏览器信息）
(function () {
  const userAgent = navigator.userAgent
  // 验证是否为Android或iPhone
  const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
  const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
  // 如果是Android或iPhone，则跳转至移动站点
  if (android || iphone) {
    location.href = 'http://m.itcast.cn'
  }})();

设备检测：

// 检测移动端
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

剪贴板操作：

// 读取剪贴板内容
navigator.clipboard.readText().then(text => console.log(text));

地理位置获取：

navigator.geolocation.getCurrentPosition(
  position => console.log(position.coords.latitude, position.coords.longitude),
  error => console.error(error)
);

三、`history` 对象

history 用于 管理浏览器会话历史记录，支持无刷新页面导航（单页应用核心）。

1. 核心属性和方法

属性/方法	说明	示例
`length`	历史记录条目数	`console.log(history.length)`
`back()`	返回上一页	`history.back()`
`forward()`	前进到下一页	`history.forward()`
`go(n)`	跳转到历史记录中的第 n 页	`history.go(-2)`（后退两页）
`pushState(state, title, url)`	添加历史记录（不刷新页面）	`history.pushState({id: 1}, '', '/page1')`
`replaceState(state, title, url)`	替换当前历史记录（不刷新页面）	`history.replaceState({}, '', '/login')`

2. 应用场景

<body>
  <button class="back">←后退</button>
  <button class="forward">前进→</button>
  <script>
    // histroy对象

    // 1.前进
    const forward = document.querySelector('.forward')
    forward.addEventListener('click', function () {
      // history.forward() 
      history.go(1)
    })
    // 2.后退
    const back = document.querySelector('.back')
    back.addEventListener('click', function () {
      // history.back()
      history.go(-1)
    })
  </script>
</body>

单页应用（SPA）路由：

// 添加新历史记录
history.pushState({ page: 1 }, 'Page 1', '/page1');

// 监听 popstate 事件（用户点击前进/后退）
window.addEventListener('popstate', event => {
  console.log('当前状态:', event.state);
});

动态修改 URL：

// 修改 URL 但不触发刷新
history.replaceState({}, '', '/profile');

四、兼容性与注意事项

location 安全限制：
- 跨域脚本无法读取其他域的 location 属性（同源策略）。
- location.replace() 可防止用户通过后退返回原页面。
navigator 用户授权：
- geolocation 和 clipboard API 需用户明确授权。
- 部分属性（如 userAgent）可被浏览器伪装。
history 状态管理：
- pushState 和 replaceState 不会触发 popstate 事件。
- 单页应用需自行处理路由变化后的内容更新。

五、总结

对象	核心功能	典型应用场景
`location`	URL 解析与导航控制	页面跳转、URL 参数解析
`navigator`	浏览器/设备信息获取与交互	设备检测、剪贴板操作、地理位置
`history`	会话历史记录管理	单页应用路由、无刷新 URL 更新

本地存储与复杂数据类型处理

一、本地存储简介

JavaScript 提供了两种浏览器端存储方案，统称为 Web Storage API：

类型	生命周期	作用域
`localStorage`	永久存储（除非手动清除）	同源的所有标签页共享
`sessionStorage`	会话级存储（标签页关闭后清除）	仅当前标签页有效

共同特点：

存储键值对（Key-Value），键和值均为字符串。
存储容量通常为 5MB（不同浏览器可能略有差异）。
仅限同源页面访问（同协议、域名、端口）。

二、基础操作

1. 存储简单数据类型

// 存储
localStorage.setItem('username', 'Alice');  // 字符串
localStorage.setItem('age', '25');          // 数值需转为字符串

// 读取
const username = localStorage.getItem('username'); // 'Alice'
const age = parseInt(localStorage.getItem('age')); // 25（转回数值）

// 删除
localStorage.removeItem('age');
localStorage.clear(); // 清空所有数据

2. 存储限制与检测

// 检测浏览器是否支持
if (typeof localStorage !== 'undefined') {
  // 支持 localStorage
}

// 错误处理（如超出存储容量）
try {
  localStorage.setItem('key', 'value');
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.error('存储空间不足！');
  }
}

三、处理复杂数据类型

由于 Web Storage 只能存储字符串，处理对象、数组等复杂数据需进行 序列化（JSON 转换）。

存储对象/数组	`localStorage.setItem(key, JSON.stringify(data))`
读取对象/数组	`JSON.parse(localStorage.getItem(key))`

1. 存储对象或数组

const user = {
  id: 1,
  name: 'Alice',
  preferences: { theme: 'dark', notifications: true }
};

// 序列化存储
localStorage.setItem('user', JSON.stringify(user));

// 读取并反序列化
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.preferences.theme); // 'dark'

2. 处理特殊数据类型

Date 对象：

// 存储
const now = new Date();
localStorage.setItem('lastLogin', now.toISOString());

// 读取
const lastLogin = new Date(localStorage.getItem('lastLogin'));

Map/Set：

const map = new Map([[1, 'a'], [2, 'b']]);
localStorage.setItem('map', JSON.stringify(Array.from(map.entries()));

const storedMap = new Map(JSON.parse(localStorage.getItem('map')));

循环引用问题：

const obj = { a: 1 };
obj.self = obj; // 循环引用
// JSON.stringify(obj); // 报错，需自行处理循环结构

四、高级技巧与最佳实践

1. 数据版本控制

避免数据结构变更导致解析失败：

const data = {
  version: 2, // 版本号
  user: { /* ... */ }
};
localStorage.setItem('data', JSON.stringify(data));

2. 存储事件监听

监听同源页面的存储变化：

window.addEventListener('storage', (e) => {
  console.log(`键 ${e.key} 已更新，新值：${e.newValue}`);
});

3. 加密敏感数据

防止数据泄露：

// 使用加密库（如 CryptoJS）
const encrypted = CryptoJS.AES.encrypt('secret', 'key').toString();
localStorage.setItem('secret', encrypted);

4. LRU 缓存策略

管理存储空间，淘汰最近最少使用数据：

function setWithLRU(key, value, maxItems = 50) {
  const keys = JSON.parse(localStorage.getItem('lruKeys') || '[]');
  if (keys.length >= maxItems) {
    const oldKey = keys.shift();
    localStorage.removeItem(oldKey);
  }
  keys.push(key);
  localStorage.setItem('lruKeys', JSON.stringify(keys));
  localStorage.setItem(key, JSON.stringify(value));
}

五、替代方案对比

方案	特点	适用场景
localStorage	简单键值存储，容量小（5MB）	小量简单数据（用户偏好设置）
IndexedDB	非关系型数据库，支持索引、事务、大容量	大量结构化数据（离线应用）
Cookies	每次请求自动携带，容量极小（4KB）	服务器端需要的少量数据（会话ID）