本文主要介绍“JavaScript历史对象实例分析”。在日常操作中，相信很多人对JavaScripthistory对象的实例分析问题有所怀疑。边肖查阅了各种资料，整理出简单易用的操作方法，希望能帮你解答“JavaScripthistory Object实例分析”的疑惑！接下来，请和边肖一起学习！
前言：
在浏览网页时，我们可能不太注意页面向前和向后的操作。但是在开发的时候，有没有想过页面跳转过什么，如何在浏览器中保存页面信息，返回上一页时是否需要重新加载页面？会有很大的疑惑。为了解决这些问题，我们首先需要知道浏览器中窗口下的历史对象。本文将详细总结这个对象的相关知识点。
history对象表示自当前窗口首次使用以来用户的导航历史。因为历史是窗口的一个属性，所以每个窗口都有自己的历史对象。出于安全原因，该对象不会公开用户访问的网址，但可以在不知道实际网址的情况下向前和向后移动。
1、路由导航
history.go()方法可以在用户历史中的任何方向导航，并且可以向前或向后移动。此方法只接受一个参数，该参数可以是整数，指示前进或后退多少步。
history . go(-1)；//后退一页
历史. go(1)；//转发一页
历史围棋(2)；//前进两页/
Go()有两种速记方法：back()和forward()。
history . back()；//后退一页
history . forward()；//上一页历史对象还有一个长度属性，history.length==1表示这是用户窗口的第一页。
Histroy的go方法、back方法、forward方法以及浏览器中用户手动的前进后退按钮都会导致页面刷新后跳转。
00-1010
2、历史状态管理API
hashchange:history对象的一个新特性是Hashchange，当页面URL的hash发生变化时会触发Hashchange，开发者此时可以进行一些操作。当URL的片段标识符改变时，将触发hashchange事件(在#符号之后的URL部分，包括#符号)。状态管理应用编程接口允许开发人员在不加载新页面的情况下更改浏览器网址。
比如：pushstate和replaceState方法，页面不会被刷新，但是路由会改变。
00-1010当活动历史条目发生变化时，将触发popstate事件。如果激活的历史条目是通过调用history.pushState()创建的，或者受到调用history.replaceState()的影响，则popState事件的State属性包含历史条目的state对象的副本。需要注意的是，调用history.pushState()或history.replaceState()不会触发popstate事件。只有在进行浏览器操作时才会触发此事件，例如用户单击浏览器的后退按钮(或在Javascript代码中调用history.back()或history.forward()方法)
（1）hashchange 事件
pushState()方法将状态添加到当前浏览器会话的历史堆栈中。该方法接收三个参数：一个
个 state 对象、一个新状态的标题和一个（可选的）相对 URL。pushState() 方法执行后，状态信息就会被推到历史记录中，浏览器地址栏也会改变以反映新的相对 URL。URL栏显示新地址, 但是不会加载 页面，甚至不会检查页面是否存在，该方法会增加history.length
（4）history.replaceState()方法
replaceState()方法修改当前历史记录实体。这个方法接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL。replaceState() 方法执行后，将会更新当前的state对象或者当前历史实体的URL来响应用户的的动作,URL栏显示新地址, 但是不会加载 页面，甚至不会检查页面是否存在。该方法不会增加history.length。
<body>
<button onclick="handleNext()">点我到下一页</button><br>
<button onclick="handleLast()">点我到上一页</button><br>
<script>
window.onload = function () {
console.log(window.history);
}
window.addEventListener('hashchange', function () {
console.log('The hash has changed!')
}, false);
window.addEventListener('popstate', (event) => {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});
function handleNext() {
const state = { userId: "1234", page: "2" }
const title = '二'
const url = 'page2.html'
window.history.pushState(state, title, url)
console.log(window.history);
}
function handleLast() {
const state = { userId: "1234", page: "21" }
const title = '一'
const url = 'page21.html'
window.history.replaceState(state, title, url)
console.log(window.history);
}
</script>
</body>
运行结果如下：
3、补充：URL的hash
URL的hash也就是锚点(#), 本质上是改变window.location的href属性，我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新,
如下图所示：
到此，关于“JavaScript history对象举例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/123887.html