需求
我在某個(gè)頁(yè)面用了緩存呀页，假如點(diǎn)擊了瀏覽器返回按鈕，需要清除緩存信息
代碼
監(jiān)聽返回
mounted () {
if (window.history && window.history.pushState) {
// 向歷史記錄中插入了當(dāng)前頁(yè)
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},
destroyed () {
window.removeEventListener('popstate', this.goBack, false);
},
methods: {
goBack () {
// console.log("點(diǎn)擊了瀏覽器的返回按鈕");
sessionStorage.clear();
window.history.back();
},
}
因?yàn)檫@個(gè)頁(yè)面有跳轉(zhuǎn)其他頁(yè)面的路由脑又，所以在組件的路由鉤子里也清了緩存
beforeRouteLeave (to, from , next) {
sessionStorage.clear();
next()
},
禁用返回
mounted () {
if (window.history && window.history.pushState) {
// 向歷史記錄中插入了當(dāng)前頁(yè)
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},
destroyed () {
window.removeEventListener('popstate', this.goBack, false);
},
methods: {
goBack () {
// console.log("點(diǎn)擊了瀏覽器的返回按鈕");
history.pushState(null, null, document.URL);
},
}
history對(duì)象
window可以省略弄屡，直接使用history
1好唯、window.history.back() : 后退
2、window.history.forward() : 前進(jìn)
3筒主、window.history.go(num) : 前進(jìn)或后退指定數(shù)量歷史記錄
window.history.go(1)
前進(jìn)
window.history.go(-1)
后退
window.history.go(0)
刷新
4关噪、window.history.pushState(state, title, url)
存儲(chǔ)當(dāng)前歷史記錄點(diǎn)
state：一個(gè)對(duì)象，可以添加相關(guān)信息
title：歷史記錄的標(biāo)題
url：創(chuàng)建的歷史記錄的鏈接
5乌妙、window.history.replaceState(state, title, url)
替換當(dāng)前歷史記錄點(diǎn)
6使兔、popstate
history 實(shí)體改變時(shí)觸發(fā)的事件，監(jiān)聽歷史記錄點(diǎn)
7冠胯、window.history.state
獲取 history 實(shí)體中的 state 對(duì)象
history.go(0) 和 location.reload() 的區(qū)別
一火诸、location.reload()
默認(rèn)參數(shù)為false，即location.reload(false)
1荠察、location.reload(false):
會(huì)用 HTTP 頭 If-Modified-Since 來(lái)檢測(cè)服務(wù)器上的文檔是否已改變
如果文檔已改變置蜀，從服務(wù)端再次下載該文檔
如果文檔未改變奈搜，從緩存中裝載文檔
作用等同于點(diǎn)擊瀏覽器的刷新按鈕 (F5)
2、location.reload(true):
繞過(guò)緩存盯荤，從服務(wù)器上重新下載該文檔
作用等同于點(diǎn)擊瀏覽器的刷新按鈕馋吗，同時(shí)按住Shift (Shift+F5)
二、history.go(0)
直接讀取緩存數(shù)據(jù)秋秤，不會(huì)從服務(wù)器端獲取數(shù)據(jù)
history.go(-1) 和 history.back() 的區(qū)別
一宏粤、history.go(-1)
后退并刷新，原頁(yè)面表單中的內(nèi)容會(huì)丟失
二灼卢、history.back()
后退绍哎，原頁(yè)面表單中的內(nèi)容會(huì)保留
