javascript基础从小白到高手系列一百六十：pageshow 与pagehide 事件

Firefox 和Opera 开发了一个名为往返缓存（bfcache，back-forward cache）的功能，此功能旨在使用
浏览器“前进”和“后退”按钮时加快页面之间的切换。这个缓存不仅存储页面数据，也存储DOM和
JavaScript 状态，实际上是把整个页面都保存在内存里。如果页面在缓存中，那么导航到这个页面时就
不会触发load 事件。通常，这不会导致什么问题，因为整个页面状态都被保存起来了。不过，Firefx
决定提供一些事件，把往返缓存的行为暴露出来。
第一个事件是pageshow，其会在页面显示时触发，无论是否来自往返缓存。在新加载的页面上，
pageshow 会在load 事件之后触发；在来自往返缓存的页面上，pageshow 会在页面状态完全恢复后
触发。注意，虽然这个事件的目标是document，但事件处理程序必须添加到window 上。下面的例子展示了追踪这些事件的代码：
(function() {
let showCount = 0;
window.addEventListener(“load”, () => {
console.log(“Load fired”);
});
window.addEventListener(“pageshow”, () => {
showCount++;
console.log(Show has been fired ${showCount} times.);
});
})();
这个例子使用了私有作用域来保证showCount 变量不进入全局作用域。在页面首次加载时，
showCount 的值为0。之后每次触发pageshow 事件，showCount 都会加1 并输出消息。如果从包含
以上代码的页面跳走，然后又点击“后退”按钮返回以恢复它，就能够每次都看到showCount 递增的
值。这是因为变量的状态连同整个页面状态都保存在了内存中，导航回来后可以恢复。如果是点击了浏
览器的“刷新”按钮，则showCount 的值会重置为0，因为页面会重新加载。
除了常用的属性，pageshow 的event 对象中还包含一个名为persisted 的属性。这个属性是一
个布尔值，如果页面存储在了往返缓存中就是true，否则就是false。可以像下面这样在事件处理程
序中检测这个属性：
(function() {
let showCount = 0;
window.addEventListener(“load”, () => {
console.log(“Load fired”);
});
window.addEventListener(“pageshow”, () => {
showCount++;
console.log(Show has been fired ${showCount} times.,
Persisted? ${event.persisted});
});
})();
通过检测persisted 属性可以根据页面是否取自往返缓存而决定是否采取不同的操作。
与pageshow 对应的事件是pagehide，这个事件会在页面从浏览器中卸载后，在unload 事件之
前触发。与pageshow 事件一样，pagehide 事件同样是在document 上触发，但事件处理程序必须被
添加到window。event 对象中同样包含persisted 属性，但用法稍有不同。比如，以下代码检测了
event.persisted 属性：
window.addEventListener(“pagehide”, (event) => {
console.log("Hiding. Persisted? " + event.persisted);
});
这样，当pagehide 事件触发时，也许可以根据persisted 属性的值来采取一些不同的操作。对
pageshow 事件来说，persisted 为true 表示页面是从往返缓存中加载的；而对pagehide 事件来说，
persisted 为true 表示页面在卸载之后会被保存在往返缓存中。因此，第一次触发pageshow 事件
时persisted 始终是false，而第一次触发pagehide 事件时persisted 始终是true（除非页面不
符合使用往返缓存的条件）。
hashchange 事件
HTML5 增加了hashchange 事件，用于在URL 散列值（URL 最后#后面的部分）发生变化时通知
开发者。这是因为开发者经常在Ajax 应用程序中使用URL 散列值存储状态信息或路由导航信息。
onhashchange 事件处理程序必须添加给window，每次URL 散列值发生变化时会调用它。event
对象有两个新属性：oldURL 和newURL。这两个属性分别保存变化前后的URL，而且是包含散列值的
完整URL。下面的例子展示了如何获取变化前后的URL：
window.addEventListener(“hashchange”, (event) => {
console.log(Old URL: ${event.oldURL}, New URL: ${event.newURL});
});
如果想确定当前的散列值，最好使用location 对象：
window.addEventListener(“hashchange”, (event) => {
console.log(Current hash: ${location.hash});
});