巧用浏览器window.history对象监听浏览器返回事件

1. 有些时候，我们需要在页面离开后保存或清除数据，此时可以利用浏览器的window.history对象做一些事情。

2. 在需要监听的页面，加入以下代码，即可在浏览器点击返回按钮后，做一些事情。

// 监听浏览器回退事件
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之前做的事，此方法不适合！