history物件保存著使用者上網的歷史記錄，從視窗被開啟的那一刻算起。由於安全性的考慮，開發人員無法得到使用者瀏覽器的URL，但藉由使用者造訪過的頁面列表，可以在不知道實際URL的情況下實現後退和前進。本文將詳細介紹BOM中的history物件
history.length屬性保存著歷史記錄的URL數量。初始時，該值為1。如果目前視窗先後造訪了三個網址，history.length屬性等於3
由於IE10+瀏覽器在初始時回傳2，存在相容性問題，所以該值並不常用
history.length // 初始时，该值为1history.length // 访问三个网址后，该值为3
方法
【go()】
使用go()方法可以在使用者的歷史記錄中任意跳轉。這個方法接收一個參數，表示向後或向前跳轉的頁面數的一個整數值。負數表示向後跳轉(類似後退鈕)，正數表示向前跳轉(類似前進按鈕)
history.go(-1history.go(1history.go(2
go()方法無參數時，相當於history.go(0)，可以刷新目前頁面
//刷新当前页面history.go();//刷新当前页面history.go(0);
【back()】
back()方法用於模仿瀏覽器的後退按鈕，相當於history.go(-1)
．【forward()] ()方法用於模仿瀏覽器的前進按鈕，相當於history.go(1)//后退一页history.back()//前进一页history.forward()
增改記錄
[注意]IE9-瀏覽器不支援
【pushState()】
history.pushState(pushState()】
history.pushState()方法向瀏覽器歷史添加了一個狀態。 pushState()方法帶有三個參數：一個狀態物件、一個標題(現在被忽略了)以及一個可選的URL位址
history.pushState(state, title, url);
state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。 当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象，此处可以填null title —— 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL
var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');// 报错history.pushState(null, null, 'https://twitter.com/hello');
history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()// url显示为//m.sbmmt.com/history.back()// url显示为//m.sbmmt.com/history.go(2)// url显示为//m.sbmmt.com/history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }【state】
statestate〜〜〜〜〜.window.onpopstate = function (event) {
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
};【popstate事件】
每當同一個文檔的瀏覽歷史(即history物件)出現變化時，就會觸發popstate事件
需要注意的是，只是調用不會觸發該事件，只有使用者點擊瀏覽器倒退按鈕和前進按鈕，或使用javascript呼叫back()、forward()、go()方法時才會觸發。另外，該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件也不會觸發
使用的時候，可以為popstate事件指定回調函數。這個回呼函數的參數是一個event事件對象，它的state屬性指向pushState和replaceState方法為當前URL所提供的狀態對象(即這兩個方法的第一個參數)
var currentState = history.state;
上面程式碼中的event.state，就是透過pushState和replaceState方法，為目前URL綁定的state物件
這個state物件也可以直接透過history物件讀取
🎜🎜var currentState = history.state;
默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进”或“后退”按钮时，浏览器就会从缓存中加载页面
浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache)，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面时就不会触发load事件
[注意]IE10-浏览器不支持
【pageshow】
pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数
第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行
[注意]虽然这个事件的目标是document，但必须将其事件处理程序添加到window
pageshow事件有一个persisted属性，返回一个布尔值。页面第一次加载时或没有从缓存加载时，这个属性是false；当页面从缓存加载时，这个属性是true
(function(){ var showCount = 0;
window.onload = function(){
console.log('loaded');
}
window.onpageshow = function(e){
e = e || event;
showCount ++;
console.log(e.persisted,showCount + 'times');
}
})();[注意]上面的例子使用了私有作用域，以防止变量showCount进入全局作用域。如果单击了浏览器的“刷新”按钮，那么showCount的值就会被重置为0，因为页面已经完全重新加载了
【pagehide】
与pageshow事件对应的是pagehide事件，该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。与pageshow事件一样，pagehide在document上面触发，但其事件处理程序必须要添加到window对象
[注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外，即使事件处理程序是空的。原因在于，onunload最常用于撤销在onload中所执行的操作，而跳过onload后再次显示页面很可能就会导致页面不正常
pagehide事件的event对象也包含persisted属性，不过其用途稍有不同。如果页面是从bfcache中加载的，那么persisted的值就是true；如果页面在卸载之后会被保存在bfcache中，那么persisted的值也会被设置为true。因此，当第一次触发pageshow时，persisted的值一定是false，而在第一次触发pagehide时，persisted就会变成true(除非页面不会被保存在bfcache中)
window.onpagehide = function(e){
e = e || event;
console.log(e.persisted);
}以上就是BOM之history对象的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
