Session History 属性和方法

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

js通过window.history来访问和操作的，操作的范围是某个tab的会话历史记录。

这个tab打开后，tab内的跳转或者你手动输入的地址，都在控制范围内。

属性

1. History.length

返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。

在这里我们想想 history.go(-histoy.length) 会发生什么呢，history.go(-history.length+1) 又会发生什么。

history.go(-histoy.length) 什么都不会发生，因为你最多只能返回 history.length - 1

history.go(-history.length+1) 当然是返回到最初打开的页面

2. History.scrollRestoration

置默认滚动恢复行为，属性可以是自动的（auto）或者手动的（manual），默认值是auto。

就是你看某个网站滚动以后，点击链接进入新页面后，再点击返回的时候，会自动回复到原来的滚动位置。 不然的话我们可能需要记住某个值，然后window.scrollTo或者Element.scrollIntoView。

看到这个就眼前一亮了，滚动恢复，这么好的属性，相见恨晚。

兼容性， PC除了IE和Edge都还好，移动端依旧是IE和Edge，外加 Andriod内置浏览器。

3. History.state

状态值，这个值一般是在histpory.pushState(state,title,url)的第一个参数设置。之后，当地址栏匹配url时，你就可获得对应的state，这个在做前端路由的时候，路由间传参是不是赶脚很有用。

方法

1. go

go(number)

通过当前页面的相对位置从浏览器历史记录。

-1的时候为上一页，参数为1的时候为下一页.

当整数参数超出界限时，例如: 如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错。

当没有参数的时候或者不是整数的参数时， chrome和firefox下面是相当于刷新, 不会增加访问历史，基本相当于window.location.reload()。

2. History.back

前往上一页, == 点击浏览器左上角的返回按钮

3. History.forward

前往下一页，, == 点击浏览器左上角的前进按钮

4. History.pushState

pushState(state, title ,url)

• state state 对象可以是任何可以序列化的东西。触发popstate事件时，事件的state属性包含了历史纪录的state对象，当然通过history.state也可以获得当前访问历史记录的state。
• title 现在大多数浏览器不支持或者忽略这个参数，最好用null代替
• url 新地址,新URL必须和当前URL在同一个源下。浏览器在调用pushState()方法后不会去加载这个URL，但有可能在之后会这样做，比如用户重启浏览器之后，这个就有点意思了。有人可能会问，这个怎么测试呢，启动chrome,打开任意网站，输入 history.pushState(null,null,'/xx/xx/xx'),然后打开新tab，输入 chrome://restart/, 这个在做单页面程序的时候，解决这种问题，需要结合服务端支持来解决这种问题。之后的文章会说道这个。

4. History.replaceState

replaceState(state, title ,url)

参数和pushState是一样的，不过这方法不会增加新的历史记录，而是替换当前的历史记录。

window的popstate事件

配合window.history使用的还有一个window的popstate事件。

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发。

调用history.pushState()或者history.replaceState()不会触发popstate事件，popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

当网页加载时,各浏览器对popstate事件是否触发有不同的表现, 自己测试的话chrome和firfox的较新版本都不会触发。

 window.onpopstate = function(event) {
   setupPage(event.state);
   console.log('onpopstate')
 }

event.state参数就是我们pushState,replaceState传入的参数。

最后来看一个简单的demo.

History Demo

History | Can I Use

Session history and navigation

Manipulating the browser history

History.js polyfill

History | MDN

popstate

jquery-pjax