Window: sessionStorage プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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 バイトを使用します。オブジェクトと同様に、整数のキーは自動的に文字列に変換されます。

値

現在のオリジンのセッションストレージ領域にアクセスするのに使用できる Storage オブジェクトを返します。

例外

SecurityError

以下のいずれかの場合に発生します。

オリジンが妥当なスキーム/ホスト名/ポート番号の組み合わせでない。これは例えば、オリジンが file: や data: スキームを使うときに起こります。
リクエストがポリシーの決定に反している。例えば、ユーザーがブラウザーで特定のオリジンにおいてデータの永続化を拒否している場合です。

なお、ユーザーが Cookie をブロックしている場合、ブラウザーはこれをデータの永続化の拒否と解釈する可能性が高いです。

例

基本的な使用法

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

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

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

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

ページ更新時にデータを保持

以下の例は、テキストフィールドの内容を自動的に保存して、ブラウザーが再読み込みされた場合に、記入した内容を失わないようにテキストフィールドの内容を復元します。

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

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

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

メモ: 詳細な使用例はウェブストレージ API の使用の記事を参照してください。