下面给你一份 《Windows.history 属性：History 对象的前世今生》超清晰讲解版，从浏览器发展史到现代前端的 SPA 应用都讲得通透，适合做笔记、写博客、或直接当科普文案使用。
🕰️ Windows.history 属性
——History 对象的前世今生（完整理解指南）
window.history 是浏览器中非常古老但又非常核心的对象，用来控制用户的浏览历史。随着 Web 的发展，它从最初的「只能前进后退」演变成今天支持 HTML5 History API 的强大工具，直接推动了 SPA 单页面应用的发展。
本文按时间顺序带你理解它的演变。
🧱 一、史前时代：History 的最初版本（只能前进/后退）
早期浏览器（IE3、Netscape）中，history 对象只有三个重要功能：
✔ 1. 后退
history.back();
✔ 2. 前进
history.forward();
✔ 3. 跳转指定步数
history.go(-2); // 后退2步
history.go(1); // 前进1步
那时的浏览器历史记录（Back/Forward Stack）完全由用户点击行为控制，JS 几乎无法操作 URL。
限制：
- 不能修改 URL
- 不能监听 URL 变化
- 无法更新页面状态
- 不能生成可分享的链接
这是“静态网页时代”的产物。
🚀 二、过渡时期：location.hash（前端黑科技的起点）
进入 AJAX 时代后（2005 以后），页面开始局部刷新，但历史记录无法反映状态变化。
于是前端想出了一个“黑科技”——利用 #hash 部分。
示例：
location.hash = "#/user/123";
特点：
- 改变 hash 不会刷新页面
- hash 变化会增加新的历史记录
- 可以监听事件：
window.onhashchange = () => { ... };
SPA（单页面应用）早期版本，就是靠 hash 路由：
http://example.com/#/home
http://example.com/#/login
优点： 不刷新、不跳转、安全
缺点： URL 丑、SEO 极差
🧬 三、现代时代：HTML5 History API（前端革命）
2012 年以后，HTML5 History API 被加入标准，史称前端路由革命。
新增两个重量级方法：
✔ 1. pushState()
向历史记录栈添加一个新状态（不会刷新页面）：
history.pushState({id: 1}, "title", "/profile/1");
✔ 2. replaceState()
替换当前历史记录（不会刷新页面）：
history.replaceState({page: 2}, "title", "/home?page=2");
✔ 3. popstate 事件（监听返回/前进）
window.onpopstate = (event) => {
console.log(event.state);
};
🎮 四、pushState 与真实导航的区别
| 行为 | 是否刷新页面 | 是否产生历史记录 |
|---|---|---|
location.href = '' | ✔ 刷新 | ✔ |
location.hash = '' | ✘ 不刷新 | ✔ |
pushState() | ✘ 不刷新 | ✔ |
replaceState() | ✘ 不刷新 | ✘ 仅替换 |
所以 SPA 能在不刷新页面的情况下，做到“假跳转”。
🌐 五、History API 推动 SPA 兴起
现代框架全部基于 History API 构建路由系统：
✔ React Router
✔ Vue Router
✔ Angular Router
✔ SvelteKit
SPA 能实现：
- 地址栏变化 ≠ 刷新页面
- 浏览器前进/后退 控制应用状态
- 每个页面可分享、可收藏、可统计 SEO
// Vue router 底层核心原理之一
history.pushState({route: '/home'}, "", "/home");
🛡️ 六、安全限制：为什么 history 不能跨域伪造？
以下行为是被禁止的：
✔ 你不能修改别的域名
✔ 不能用历史记录钓鱼
✔ 不能伪造回退时跳到危险站点
浏览器强制要求：
pushState 的 URL 必须和当前页面同源
否则会抛：
SecurityError: Failed to execute 'pushState'
🧩 七、History 对象的属性大全（现代浏览器）
| 属性 | 含义 |
|---|---|
history.length | 历史记录长度 |
history.state | 当前记录的 state 对象 |
history.scrollRestoration | 控制返回后的滚动位置（auto/manual） |
🧨 八、History 对象的经典应用场景
🎯 1. 前端路由（SPA）
pushState + popstate = Router 核心
🎯 2. 图片浏览器（左右翻页）
history.go(1/-1) 实现前后翻页操作
🎯 3. 表单结果页的“不可返回”
history.replaceState(null, '', location.href);
🎯 4. 防止重复提交
POST 成功后 replaceState 清除历史记录
📌 九、真正理解 History 的一句话总结
History 对象是浏览器“前进/后退栈”的 JS 操作接口。
从只能控制导航 → 到 HTML5 直接控制 URL → 再到 SPA 的路由革命。
它让前端真正具备了「控制 URL 而不刷新页面」的能力。
发表回复