history对象用来存储历史浏览记录(URL),并且提供了一系列属性和方法用来表示和操作这些记录。
其中存储历史浏览记录的规则为:
如图所示,当在同一个窗口进入不同的页面(URL)时,比如从page1进入page2,再进入page3,page4。此时,历史记录为page1-page2-page3-page4,如果后退到page2,再进入page5,page6。此时记录为page1-page2-page5-page6。
history对象属性:
length:表示目前保存的历史记录数量。
state:表示当前浏览的页面的状态对象。
scrollRestoration:允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)。
history对象方法(html5新增了pushState和replaceState方法):
back():模拟浏览器后退按钮,相当于history.go(-1)。
forward():模拟浏览器前进按钮,相当于history.go(1)。
go():在历史浏览记录中任意跳转,正整数为向前,负整数为向后,零为刷新当前页面。当超出临界值时也不报错,只是不跳转。
pushState(state, title, url): 向浏览记录中添加一条记录,和之前规则一样,会覆盖当前页面前端所有记录。页面的url会变成新添加的记录,但是页面内容还是之前的,不会刷新页面。而location.hash只在当前页面url后面添加东西,并不会添加新的浏览记录,浏览器的前进后退也是没法控制的。
其中参数:
state:状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。
title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
url:新历史记录的地址,使用./ ../ 和/来控制在哪里添加内容。新URL必须和当前URL在同一个域,否则,pushState()将丢出异常
replaceState(state, title, url): 和pushState一样的参数,区别就是replaceState只是改变当前url,并不会向历史记录中添加一条记录。
popState事件:每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件
需要注意的是,仅仅调用pushState方法或replaceState方法,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用javascript调用back()、forward()、go()方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发