JavaScript入门⑩｜BOM与浏览器对象，localStorage_位置_历史记录

川冰ICE2026-05-26 8:31

author: 专注前端开发，分享JavaScript干货

title: JavaScript入门⑩｜BOM与浏览器对象，localStorage_位置_历史记录
update: 2026-04-28
tags: JavaScript,BOM,localStorage,sessionStorage,location,navigator,history,前端入门

作者：专注前端开发，分享JavaScript干货

更新时间：2026年4月

适合人群：掌握DOM操作，想了解浏览器对象模型的开发者

前言：BOM是什么？

DOM操作网页内容，BOM（Browser Object Model）操作浏览器本身。

BOM包含：window、navigator、location、history、screen、localStorage等。

一、window 对象

window 是浏览器窗口的全局对象，所有全局变量和函数都是它的属性/方法。

javascript 复制代码 
// 全局变量实际上是window的属性
var name = "张三";
console.log(window.name); // "张三"

// 常用window方法
window.alert("提示");           // 弹窗
window.confirm("确定删除？");    // 确认框，返回true/false
window.prompt("请输入：");       // 输入框

// 窗口尺寸
console.log(window.innerWidth);  // 可视区宽度（不含工具栏）
console.log(window.innerHeight); // 可视区高度
console.log(window.outerWidth);  // 整个浏览器宽度
console.log(window.outerHeight); // 整个浏览器高度

// 窗口操作
window.open("https://example.com"); // 打开新窗口
window.close();                      // 关闭窗口

// 定时器
const timeoutId = setTimeout(() => console.log("1秒后"), 1000);
const intervalId = setInterval(() => console.log("每秒"), 1000);

// 清除定时器
clearTimeout(timeoutId);
clearInterval(intervalId);

二、navigator 对象（浏览器信息）

javascript 复制代码 
// 用户代理字符串（浏览器识别）
console.log(navigator.userAgent);
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...

// 浏览器名称和版本
console.log(navigator.appName);  // "Netscape"
console.log(navigator.appVersion);
console.log(navigator.appCodeName);

// 操作系统
console.log(navigator.platform); // "Win32"

// 语言
console.log(navigator.language);  // "zh-CN"
console.log(navigator.languages); // ["zh-CN", "zh", "en"]

// 是否联网
console.log(navigator.onLine);

// 是否启用了Cookie
console.log(navigator.cookieEnabled);

// 检测移动端
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
console.log("是否移动端：", isMobile);

// 剪贴板访问（需要用户授权）
async function copyToClipboard(text) {
    try {
        await navigator.clipboard.writeText(text);
        console.log("复制成功！");
    } catch (error) {
        console.error("复制失败：", error);
    }
}

三、location 对象（URL信息）

javascript 复制代码 
// URL解析
console.log(location.href);      // 完整URL
console.log(location.protocol); // "https:"
console.log(location.host);      // "www.example.com"
console.log(location.hostname); // "www.example.com"
console.log(location.port);      // "8080"
console.log(location.pathname);  // "/path/to/page"
console.log(location.search);    // "?id=123&name=test"
console.log(location.hash);       // "#section"

// 解析URL参数
const params = new URLSearchParams(location.search);
console.log(params.get("id"));    // "123"
console.log(params.get("name"));  // "test"

// 修改URL（不刷新页面）
history.pushState(null, "", "/new-page"); // 添加历史记录
history.replaceState(null, "", "/another"); // 替换当前记录

// 页面跳转
location.href = "https://example.com";  // 跳转（产生历史记录）
location.assign("https://example.com");  // 同上
location.replace("https://example.com"); // 替换（不产生历史记录）
location.reload();                        // 刷新页面
location.reload(true);                    // 强制从服务器刷新（Ctrl+F5）

四、history 对象（浏览历史）

javascript 复制代码 
// 历史记录数量
console.log(history.length);

// 前进后退
history.back();     // 后退一页（等同浏览器后退按钮）
history.forward();  // 前进一页
history.go(-2);     // 后退两页
history.go(1);      // 前进一页

// pushState / replaceState（不刷新页面的路由）
history.pushState({ page: 1 }, "", "/page1");
history.pushState({ page: 2 }, "", "/page2");
history.pushState({ page: 3 }, "", "/page3");

// 监听浏览器前进后退（popstate事件）
window.addEventListener("popstate", (event) => {
    console.log("当前state：", event.state);
    // 根据state更新页面内容
});

五、localStorage 与 sessionStorage

5.1 localStorage（持久存储）

javascript 复制代码 
// 存储数据（键值对，值必须是字符串）
localStorage.setItem("username", "张三");
localStorage.setItem("age", "25"); // 数字会自动转字符串

// 读取数据
const name = localStorage.getItem("username");
console.log(name); // "张三"

// 删除数据
localStorage.removeItem("username"); // 删除单个
localStorage.clear(); // 清空全部

// 存储对象（需要序列化）
const user = { name: "张三", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
const stored = JSON.parse(localStorage.getItem("user"));
console.log(stored.name); // "张三"

// 存储数组
const fruits = ["苹果", "香蕉", "橙子"];
localStorage.setItem("fruits", JSON.stringify(fruits));
console.log(JSON.parse(localStorage.getItem("fruits"))); // ["苹果", "香蕉", "橙子"]

5.2 sessionStorage（会话存储）

javascript 复制代码 
// 与localStorage用法完全相同
sessionStorage.setItem("temp", "临时数据");

// 区别：sessionStorage在浏览器关闭后自动清除
// localStorage 永久保存（除非手动清除）
console.log(sessionStorage.getItem("temp"));

5.3 存储事件监听（跨标签页通信）

javascript 复制代码 
// 当localStorage在别的标签页被修改时触发
window.addEventListener("storage", (event) => {
    console.log("修改的键：", event.key);
    console.log("旧值：", event.oldValue);
    console.log("新值：", event.newValue);
    console.log("来源：", event.url);
});

六、实战：用户偏好设置存储

javascript 复制代码 
class SettingsStore {
    constructor(prefix = "app_") {
        this.prefix = prefix;
    }

    set(key, value) {
        const fullKey = this.prefix + key;
        const data = typeof value === "object"
            ? JSON.stringify(value)
            : String(value);
        localStorage.setItem(fullKey, data);
    }

    get(key, defaultValue = null) {
        const fullKey = this.prefix + key;
        const data = localStorage.getItem(fullKey);
        if (data === null) return defaultValue;

        try {
            return JSON.parse(data);
        } catch {
            return data;
        }
    }

    remove(key) {
        localStorage.removeItem(this.prefix + key);
    }

    clear() {
        const keys = Object.keys(localStorage);
        keys.forEach(key => {
            if (key.startsWith(this.prefix)) {
                localStorage.removeItem(key);
            }
        });
    }
}

// 使用
const store = new SettingsStore("user_");

// 保存用户设置
store.set("theme", "dark");
store.set("fontSize", 16);
store.set("userInfo", { name: "张三", email: "zhang@example.com" });

// 读取
console.log(store.get("theme"));      // "dark"
console.log(store.get("fontSize"));  // "16"
console.log(store.get("userInfo"));   // { name: "张三", email: "zhang@example.com" }
console.log(store.get("notExist", "默认值")); // "默认值"

七、知识卡

对象 作用
window 浏览器窗口，全局对象
navigator 浏览器信息、在线状态
location URL信息、页面跳转
history 浏览历史、路由
localStorage 持久存储（不主动清除一直存在）
sessionStorage 会话存储（关闭浏览器后清除）
setTimeout 一次性定时器
setInterval 重复定时器

八、课后作业

  1. 用 localStorage 实现一个页面访问计数器，刷新页面后显示访问次数
  2. 用 sessionStorage 实现一个表单草稿保存功能（输入内容后刷新页面不丢失）
  3. 用 navigator.onLine 监听网络状态变化，断网时显示提示

有问题欢迎评论区留言，大家一起讨论！

标签：JavaScript | BOM | localStorage | sessionStorage | location | navigator | history | 前端入门

相关推荐
小二·几秒前
Rust 爬虫与数据处理实战：大规模并发抓取 + 流式处理
开发语言·爬虫·rust
程序喵大人5 分钟前
【C++并发系列】第二章：锁解决了什么问题？
开发语言·c++·并发编程·锁
guygg887 分钟前
二维弹塑性有限元分析（von Mises 等向硬化）— MATLAB 实现
开发语言·人工智能·matlab
在放️20 分钟前
Python 练习题讲解 2 · 循环计算
开发语言·python
江华森26 分钟前
高级 Bash 脚本编程指南 — 实战教程
开发语言·bash
我不是懒洋洋31 分钟前
【C++】string（string的成员变量、auto和范围for、string常用接口的说明、OJ题目、string的模拟实现）
c语言·开发语言·c++·visual studio
承渊政道32 分钟前
飞算JavaAI 智能引导背后的多 Agent 协作机制解析:从老旧 Java 后台升级到可运行工程
java·开发语言·spring boot·安全·intellij-idea·软件工程·ai编程
Brilliantwxx33 分钟前
【C++】 C++11 知识点梳理（中）
开发语言·c++
j7～36 分钟前
【C++】STL--Vector容器--拆析解剖Vector的实现以及Vector的底层详解（2）
开发语言·c++·动态二维数组·vector深度剖析·vector的实现·杨辉三角形
三品吉他手会点灯8 小时前
C语言学习笔记 - 50.流程控制4 - 流程控制为什么非常非常重要
c语言·开发语言·笔记·学习
热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05HTTP 与 HTTPS 的区别：从原理到实战详解06GitHub 镜像站点07上线仅72小时被强制下架：Claude Fable 5 的短命08AI科技热点日报 | 2026年6月1日09Codex 下载安装指南：Windows 和 macOS 官方版下载10Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析