JavaScript加强篇——第七章 浏览器对象与存储要点
目录
一、location对象
三、history对象
四、本地存储基础
五、localStorage详解
六、sessionStorage详解
七、存储复杂数据类型
本文摘要：
文章系统介绍了浏览器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