有些时候,我们需要在页面离开后保存或清除数据,此时可以利用浏览器的window.history对象做一些事情。
在需要监听的页面,加入以下代码,即可在浏览器点击返回按钮后,做一些事情。
// 监听浏览器回退事件
function backListen () {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () { // 点击后退会触发popstate事件
var hashLocation = location.hash; // 获取点击后的页面的hash值
var hashSplit = hashLocation.split("#!/"); // 将哈希值装进数组(这里可以在控制台打印看效果)
var hashName = hashSplit[1]; // 取数组的第一个
// 点击后的页面哈希值与上一个页面不同,借助这个区别可以判断是否离开了页面,从而做一些操作
if (hashName !== '') {
var hash = window.location.hash;
if (hash === '') { // 如果当前页面没有哈希值
// do something...
sessionStorage.removeItem("flag"); // 这里我做了清除sessionStorage的操作
// 强行回退一步,就不用多点一次了😎
history.back(); // 直接跳过没有哈希值的页面,就不会出现要点两次才能回到真正的上一页了
}
}
});
// 将含有哈希值的页面,强行插入浏览器历史记录中,此时相当于该页面有两个url在历史记录中,一个是有hash的,一个是没有hash的。
window.history.pushState('forward', null, '#');
}
}
window.onload = function(){
backListen();
}
注意:这个方法监听的是浏览器卸载了当前页面,进入下一个页面前之间的事件,即此时页面已经unload,所以如果要在页面unload之前做的事,此方法不适合!