window.history(window history length)

window.history 方法总结

使用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、浏览器兼容性

window.history 页面栈的回退问题

我们平时再跳转页面时，页面会被保存至 页面栈 里。每次 回退 或 左滑回退 时，会延页面栈依次返回。

那么问题来了，现有场景如下：

从 A 页面 ==》 B 页面 ==》 C 页面，但从 C 页面返回时，只能返回至 A 页面。

即 B 页面不记录到 页面栈 里，那么从 C 页面返回时，就会直接返回至 A 页面。

如何才能不把 B 页面记录在 页面栈 里呢？

浏览器有个属性： history ，里面包含了所有页面的记录栈，但 不能修改 ， 只能读取 。

跳转页面

我们平时一般都用 window.location.href = ' ' 来跳转页面，这种方式会把当前页面 push 到页面栈里。

其实还有一种方式 window.location.replace (' ' )，即把当前页面 替换 为新页面，其当前页面不会记录到页 面栈里 。

如在 B 页面跳转至 C 页面可写为： window.location.replace ('页面C')

这时再返回时，会直接返回至 A 页面。

但是，好像不能实现，这时浏览器的一个属性 history 就起到作用了

再 history 里有个方法： replaceState

替换当前浏览器的状态，语法为

history.replaceState(null, '', '你想要替换的页面地址')

这俩结合就能实现不保存当前页面至页面栈了

如有更好的办法，欢迎小伙伴评论~~~

window.history

window.history属性指向 history 对象，它表示当前窗口的浏览历史。

由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。

浏览器工具栏的“前进”和“后退”按钮，其实就是对 history 对象进行操作

history 对象主要有两个属性。

history.back()

history.forward()

history.go()

注意，移动到以前访问过的页面时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

其实还有很多内容，只不过不常见。写了也没什么用。暂时只写到这里。

w3c

菜鸟教程