Window: sessionStorage プロパティ

BaselineWidely available

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

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 をブロックしている場合、ブラウザーはこれをデータの永続化の拒否と解釈する可能性が高いです。

例

基本的な使用法

// 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);});

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