Window: sessionStorage プロパティ

sessionStorage プロパティは読み取り専用で、セッションの Storage オブジェクトにアクセスできます。sessionStorage は Window.localStorage に似ています。唯一の違いは、localStorage に保存されたデータに期限がないのに対して、sessionStorage に保存されたデータはページのセッションが終了するときに消去されることです。

• 文書がブラウザー内の特定のタブに読み込まれるたびに、固有のページセッションが作成され、その特定のタブに割り当てられます。そのページセッションは特定のタブでのみ有効です。
• ページセッションはタブやブラウザーが開いている限り続き、ページの再読み込みや復元にも耐えられます。
• 新しいタブやウィンドウでページを開くと、最上位の閲覧コンテキストの値で新しいセッションが作成されますが、これはセッションクッキーの動作方法とは異なります。
• 同じ URL で複数のタブ/ウィンドウを開くための sessionStorage はタブ/ウィンドウごとに作成します。
• タブをコピーすると、そのタブの sessionStorage が新しいタブにコピーされます。
• タブ/ウィンドウを閉じられた場合、セッションは終わり、 sessionStorage 内のオブジェクトは消去されます。

sessionStorage に格納されるデータはページのプロトコルごとに分かれています。例えば、http://example.com のように HTTP でアクセスしたサイトのスクリプトで格納されるデータは、 https://example.com のように HTTPS でアクセスしたサイトとは異なる sessionStorage オブジェクトに格納されます。

キーと値は常に UTF-16 文字列形式で、 1 文字あたり 2 バイトを使用します。オブジェクトと同様に、整数のキーは自動的に文字列に変換されます。

// sessionStorage にデータを保存
sessionStorage.setItem("key", "value");

// sessionStorage に保存したデータを取得
let data = sessionStorage.getItem("key");

// sessionStorage に保存したデータを削除
sessionStorage.removeItem("key");

// sessionStorage からすべての保存したデータを削除
sessionStorage.clear();

// 追跡するテキストフィールドを取得
let field = document.getElementById("field");

// 自動保存された値があるかを確認
// （ページが意図せず再読み込みされた場合にのみ発生）
if (sessionStorage.getItem("autosave")) {
  // テキストフィールドの内容を復元
  field.value = sessionStorage.getItem("autosave");
}

// テキストフィールドの変更を待ち受け
field.addEventListener("change", () => {
  // セッションストレージオブジェクトに結果を保存
  sessionStorage.setItem("autosave", field.value);
});