跨标签页共享 sessionStorage

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>跨标签页共享 sessionStorage</title>
  </head>
  <body>
    <div><input type="text" id="input" /><button id="btn">设置</button></div>
    <div id="content"></div>

    <a href="./storage.html" target="_blank">在新窗口打开</a>

    <script type="text/javascript">
      const input = document.getElementById('input');
      const btn = document.getElementById('btn');
      const content = document.getElementById('content');
      btn.addEventListener('click', () => {
        sessionStorage.setItem('ab', input.value);
        content.innerHTML = input.value;
      });
      // 为了简单明了删除了对 IE 的支持
      (function () {
        if (!sessionStorage.length) {
          // 这个调用能触发目标事件，从而达到共享数据的目的
          localStorage.setItem('getSessionStorage', Date.now());
        }

        // 该事件是核心
        window.addEventListener('storage', function (event) {
          if (event.key == 'getSessionStorage') {
            // 已存在的标签页会收到这个事件
            localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
            localStorage.removeItem('sessionStorage');
          } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
            // 新开启的标签页会收到这个事件
            content.innerHTML = event.newValue;
            var data = JSON.parse(event.newValue);
            for (key in data) {
              sessionStorage.setItem(key, data[key]);
            }
          }
        });
      })();
    </script>
  </body>
</html>