window.history 方法总结

Posted 2023-04-27

参考技术A 使用History

一、历史记录概览

二、添加和修改历史记录条目：

两种方法都允许我们添加和更新历史记录，它们的工作原理相同并且可以添加数量相同的参数。除了方法之外，还有popstate事件。在后文中将介绍怎么使用和什么时候使用popstate事件。

pushState()和replaceState()参数一样，参数说明如下：

两个方法的主要区别就是：pushState()是在history栈中添加一个新的条目，replaceState()是替换当前的记录值。

使用方法：
1、onpopstate

2、pushState
在history栈中添加一个新的条目

3、replaceState
替换当前的记录值

4、读取当前状态

在页面加载时，可能会包含一个非空的状态对象。这种情况是会发生的，例如，如果页面中使用pushState()或replaceState()方法设置了一个状态对象，然后用户重启了浏览器。当页面重新加载时，页面会触发onload事件，但不会触发popstate事件。但是，如果你读取 history.state 属性，你会得到一个与 popstate 事件触发时得到的一样的状态对象。

你可以直接读取当前历史记录条目的状态，而不需要等待popstate事件：

5、浏览器兼容性

history对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：

window.history.[属性|方法]

注意：window可以省略。

History 对象属性

History 对象方法

使用length属性，当前窗口的浏览历史总长度，代码如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>