別ドメイン遷移を経たときのsessionStorageの保存状態

限定された話題だが、画面A ⇒ 画面B(別ドメイン) ⇒ 画面A と遷移するケースで、最初の画面AでsessionStorageに何か保存したときに、別ドメインのサイトを挟んで再度画面Aに戻ったときでも それが保存されているか、という話。
たぶん問題なく保存されているんだろう思ってはいたのだが、確証が無かったのでやってみた。

sessionStorageについてざっくり言うと、ページのセッションが終了するときに消去されるもので、別のタブや別ウィンドウには共有されない(新しいセッションが開始される)というもの。

結論としては、別ドメインを挟んだとしても問題なく保存されている。

検証

画面Aは以下(headは省略)。

<body>
  <h1>画面A</h1>
  <div>
    Session Storageの状態:
    <strong id="state"></strong>
  </div>
  <button onclick="transitonToB()">画面Bへ遷移</button>
  <script>
    const key = 'sessionstoragetest';
    function setState() {
      const data = sessionStorage.getItem(key);
      const elem = document.getElementById('state');
      elem.innerText = data ? `${(Date.now() - data) / 1000}秒前に保存` : 'データなし';
    }
    function transitonToB() {
      sessionStorage.setItem(key, Date.now());
      window.location.href = 'http://localhost:8081/test_sessionstorage2.html';
    }
    setState();
  </script>
</body>

画面Bは以下。

<body>
  <h1>画面B</h1>
  <a href="http://localhost:8080/test_sessionstorage1.html">画面Aへ遷移</a>
</body>

nodejsで簡易Webサーバを起動。画面Aは8080ポート、画面Bは8081ポート。

const http = require('http');
const fs = require('fs');

const page1 = fs.readFileSync('./test_sessionstorage1.html'); // 画面A
const page2 = fs.readFileSync('./test_sessionstorage2.html'); // 画面B

const server1 = http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(page1);
})
server1.listen(8080);

const server2 = http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(page2);
})
server2.listen(8081);

検証結果

画面A(初期画面)。

画面Bに遷移。

再度、画面Aに遷移。

初期画面Aで保存したsessionStorageから復元されたことを確認。

以上です。