限定された話題だが、画面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から復元されたことを確認。
以上です。