JavaScript加强篇——第七章浏览器对象与存储要点

本文摘要：

文章系统介绍了浏览器BOM（Browser Object Model）核心对象和本地存储技术。主要内容包括：1）location对象解析URL组成及页面导航方法；2）navigator对象获取浏览器和设备信息；3）history对象管理浏览历史；4）对比localStorage（永久存储）和sessionStorage（会话存储）的特性与使用场景；5）存储复杂数据的JSON转换方法。最后总结了BOM"三剑客"（location/navigator/history）与存储"双雄"（localStorage/sessionStorage）的核心要点，并附高频面试题速答。全文为前端开发提供了浏览器对象和本地存储的实用技术指南。

一、location对象

URL组成解析

常用属性与方法

属性/方法	说明	示例
href	完整URL（读写）	`location.href = 'https://new.com'`
protocol	协议部分	`location.protocol` → "https:"
host	主机名+端口	`location.host` → "example.com:8080"
hostname	主机名	`location.hostname` → "example.com"
port	端口号	`location.port` → "8080"
pathname	路径部分	`location.pathname` → "/path/page.html"
search	查询参数	`location.search` → "?name=John"
hash	锚点部分	`location.hash` → "#section1"
reload()	刷新页面	`location.reload(true)`（强制刷新）
assign()	跳转页面（保留历史）	`location.assign('new.html')`
replace()	替换页面（不保留历史）	`location.replace('login.html')`

二、navigator对象

核心属性与应用

复制代码

// 1. 浏览器基本信息
console.log('浏览器名称:', navigator.appName);
console.log('浏览器版本:', navigator.appVersion);
console.log('用户代理:', navigator.userAgent);
console.log('操作系统:', navigator.platform);

// 2. 设备检测示例
function detectDevice() {
  const ua = navigator.userAgent;
  
  // 检测移动设备
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
  
  // 重定向到移动版
  if(isMobile && !location.href.includes('m.')) {
    location.href = 'https://m.example.com';
  }
}

// 页面加载时检测
window.addEventListener('DOMContentLoaded', detectDevice);

常用场景

移动设备检测与重定向
浏览器兼容性处理
网络状态检测（navigator.onLine）

三、history对象

浏览历史操作

方法	说明	示例
back()	后退一页	`history.back()`
forward()	前进一页	`history.forward()`
go()	跳转指定步数	`history.go(-2)`（后退两页）
pushState()	添加历史记录（不刷新）	`history.pushState(data, '', 'new-url')`
replaceState()	替换当前历史记录	`history.replaceState(data, '', 'current')`

单页面应用(SPA)示例

复制代码

// 导航切换（不刷新页面）
document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const page = this.getAttribute('data-page');
    
    // 更新内容
    loadPage(page);
    
    // 添加历史记录
    history.pushState({ page }, '', `#${page}`);
  });
});

// 处理前进/后退
window.addEventListener('popstate', (e) => {
  if(e.state) {
    loadPage(e.state.page);
  }
});

四、本地存储基础

两种存储方式对比

特性	localStorage	sessionStorage
生命周期	永久存储（除非手动删除）	关闭浏览器标签页即失效
作用域	同源窗口共享	仅当前标签页可用
存储容量	约5MB	约5MB
应用场景	长期保存的用户设置	临时表单数据/单次会话数据

核心API

复制代码

// 通用方法（两者API相同）
存储数据: setItem(key, value)
获取数据: getItem(key)
删除数据: removeItem(key)
清空所有: clear()

五、localStorage详解

基础使用

复制代码

// 1. 存储数据
localStorage.setItem('username', 'john_doe');
localStorage.setItem('theme', 'dark');

// 2. 获取数据
const username = localStorage.getItem('username');
console.log(username); // "john_doe"

// 3. 删除单个数据
localStorage.removeItem('theme');

// 4. 清空所有
localStorage.clear();

实际应用场景

用户主题偏好保存
购物车数据持久化
未登录时的草稿保存

六、sessionStorage详解

基础使用

复制代码

// 存储表单数据
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const formData = {
    name: this.name.value,
    email: this.email.value
  };
  
  // 临时保存（刷新页面不丢失）
  sessionStorage.setItem('formData', JSON.stringify(formData));
  
  // 提交到服务器...
});

// 页面加载时恢复数据
window.addEventListener('load', function() {
  const saved = sessionStorage.getItem('formData');
  if(saved) {
    const formData = JSON.parse(saved);
    document.querySelector('#name').value = formData.name;
    document.querySelector('#email').value = formData.email;
  }
});

适用场景

多步骤表单数据暂存
敏感数据临时存储（关闭页面自动清除）
单次会话的状态保存

七、存储复杂数据类型

问题与解决方案

复制代码

// 尝试直接存储对象
const product = {
  id: 101,
  name: 'Wireless Headphones',
  price: 199.99
};

localStorage.setItem('product', product);
console.log(localStorage.getItem('product')); // 输出 "[object Object]"

JSON转换方法

复制代码

// 正确存储方式
// 1. 存储时转换为JSON字符串
localStorage.setItem('product', JSON.stringify(product));

// 2. 读取时解析为对象
const saved = localStorage.getItem('product');
const productObj = JSON.parse(saved);
console.log(productObj.name); // "Wireless Headphones"

// 3. 处理数组
const cartItems = [{id:1, qty:2}, {id:3, qty:1}];
localStorage.setItem('cart', JSON.stringify(cartItems));

// 4. 读取数组
const cart = JSON.parse(localStorage.getItem('cart'));
console.log(cart[0].id); // 1

⚠️ 注意事项

JSON不支持存储函数、undefined等特殊类型
循环引用的对象无法正确转换

使用try-catch处理解析错误：

复制代码

try {
  const data = JSON.parse(localStorage.getItem('data'));
} catch(e) {
  console.error('解析失败', e);
  localStorage.removeItem('data');
}

✅ BOM与存储核心要点总结

📝 高频面试题速答

Q：location.reload(true)的作用？

A：强制刷新页面（忽略缓存），相当于Ctrl+F5
Q：如何检测用户是否在移动设备上？

A：使用navigator.userAgent匹配设备关键字
Q：localStorage和sessionStorage的主要区别？

A：localStorage永久存储，sessionStorage会话结束即清除
Q：为什么存储对象前要用JSON.stringify？

A：因为本地存储只支持字符串，需将对象转为JSON字符串
Q：history.pushState()和location.href的区别？

A：pushState不刷新页面只添加历史记录，location.href会刷新页面

🧠 记忆口诀

"BOM三剑客，存储双雄会"

三剑客：location、navigator、history

双雄：localStorage、sessionStorage

JavaScript加强篇——第七章 浏览器对象与存储要点

一、location对象

URL组成解析

常用属性与方法

二、navigator对象

核心属性与应用

常用场景

三、history对象

浏览历史操作

单页面应用(SPA)示例

四、本地存储基础

两种存储方式对比

核心API

五、localStorage详解

基础使用

实际应用场景

六、sessionStorage详解

基础使用

适用场景

七、存储复杂数据类型

问题与解决方案

JSON转换方法

⚠️ 注意事项

✅ BOM与存储核心要点总结

📝 高频面试题速答

🧠 记忆口诀

JavaScript加强篇——第七章浏览器对象与存储要点