JS | JS之BOM篇 - history对象常用方法详解

 

history对象保存了用户从打开窗口那一刻的上网历史记录。出于安全限制，开发人员无法读取用户的历史记录，但是可以通过history提供的方法，在不知道实际URL的情况下实现后退和前进。

一、属性

history.length表示历史记录的URL数量，初始值是1，如果已经访问了3个网址，history.length值就是3

console.log(history.length); // 1

二、方法

history对象提供了go()、back()、forward()方法，用于操作浏览历史之间的移动。

go()

go()方法可以在历史记录中任意跳转，它接收一个整数值作为参数，表示向前或向后的页面数。负数表示向后跳转(类似于后退按钮)，正数表示向前跳转(类似于前进按钮)，0相当于刷新当前页面

history.go(-1); // 后退一步
history.go(2); // 前进两步
history.go(0); // 刷新当前页

back()

back()方法用于模仿浏览器的后退按钮，相当于history.go(-1)

history.back();

forward()

forward()方法用于模仿浏览器的前进按钮，相当于history.go(1)

history.forward();

注意： 如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败。使用历史记录时，页面通常从浏览器缓存之中加载，而不是重新要求服务器发送新的网页

三、H5新增方法：增改记录

HTML5为history对象提供了history.pushState()和history.replaceState()方法，用于添加和修改浏览器历史记录。

pushState()

pushState()方法接收三个参数：状态对象stateObject、标题title、URL地址（可选）。该方法向历史记录中添加一个状态。

history.pushState(object state, string title, string url) 方法能实现在不刷新页面的情况下修改浏览器 url 链接，并且该方法创建了新的浏览记录，并将新的链接插入到浏览记录队列中。

判断是否支持 pushSta