javascript基础学习系列二百七十九：pageshow 与 pagehide 事件

Firefox 和 Opera 开发了一个名为往返缓存(bfcache，back-forward cache)的功能，此功能旨在使用 浏览器“前进”和“后退”按钮时加快页面之间的切换。这个缓存不仅存储页面数据，也存储 DOM 和 JavaScript 状态，实际上是把整个页面都保存在内存里。如果页面在缓存中，那么导航到这个页面时就 不会触发 load 事件。通常，这不会导致什么问题，因为整个页面状态都被保存起来了。不过，Firefx 决定提供一些事件，把往返缓存的行为暴露出来。
第一个事件是 pageshow，其会在页面显示时触发，无论是否来自往返缓存。在新加载的页面上， pageshow 会在 load 事件之后触发;在来自往返缓存的页面上，pageshow 会在页面状态完全恢复后 触发。注意，虽然这个事件的目标是 document，但事件处理程序必须添加到 window 上。下面的例子
注意 使用readystatechange只能尽量模拟DOMContentLoaded，但做不到分毫不差。 load 事件和 readystatechange 事件发生的顺序在不同页面中是不一样的。

(function() { 21 let showCount = 0;
});
                `Persisted? ${event.persisted}`);
}); })();

通过检测 persisted 属性可以根据页面是否取自往返缓存而决定是否采取不同的操作。
展示了追踪这些事件的代码:

   (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。可以像下面这样在事件处理程 序中检测这个属性:

  window.addEventListener("load", () => {
  console.log("Load fired");
22 console.log(`Show has been fired ${showCount} times.`, 23
window.addEventListener("pageshow", () => {
  showCount++;

与 pageshow 对应的事件是 pagehide，这个事件会在页面从浏览器中卸载后，在 unload 事件之 前触发。与 pageshow 事件一样，pagehide 事件同样是在 document 上触发，但事件处理程序必须被 添加到 window。event 对象中同样包含 persisted 属性，但用法稍有不同。比如，以下代码检测了 event.persisted 属性:

   window.addEventListener("pagehide", (event) => {
      console.log("Hiding. Persisted? " + event.persisted);
});

这样，当 pagehide 事件触发时，也许可以根据 persisted 属性的值来采取一些不同的操作。对 27 pageshow 事件来说，persisted 为 true 表示页面是从往返缓存中加载的;而对 pagehide 事件来说， persisted 为 true 表示页面在卸载之后会被保存在往返缓存中。因此，第一次触发 pageshow 事件
时 persisted 始终是 false，而第一次触发 pagehide 事件时 persisted 始终是 true(除非页面不 符合使用往返缓存的条件)。

注意 注册了onunload事件处理程序(即使是空函数)的页面会自动排除在往返缓存之 外。这是因为 onunload 事件典型的使用场景是撤销 onload 事件发生时所做的事情，如果 使用往返缓存，则下一次页面显示时就不会触发 onload 事件，而这可能导致页面无法使用。

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}`);
});