HTML History API
学习pushState · 难度：高级 · +15XP
HTML History API 浏览器历史
操作浏览器历史记录，实现SPA单页应用路由。
核心API
history.pushState({page:1},"Title","/page/1"); // 添加
history.replaceState({page:2},"","/page/2"); // 替换
window.onpopstate=e=>{console.log(e.state)}; // 监听pushState vs replaceState
| pushState | replaceState |
|---|---|
| 新增历史,可回退 | 替换当前,不可回退 |
| 适用页面跳转 | 适用筛选/排序 |
???? 练习
- 实现无刷新页面切换
- 监听浏览器前进后退按钮
学习与实践建议
- 先理解本节的核心概念和语法规则
- 在右边编辑器中修改示例代码，观察运行结果变化
- 尝试用学到的知识完成一个小练习——比如自己写一个工具函数或小程序
- 遇到问题时，查阅官方文档是最快的学习途径
编程是门实践技能，动手写代码比看教程重要得多。坚持每天练习，你会很快看到进步！