Window.sessionStorage
sessionStorage
プロパティは読み取り専用で、セッションの Storage
オブジェクトにアクセスできます。sessionStorage
は Window.localStorage
に似ています。唯一の違いは、localStorage
に保存されたデータに期限がないのに対して、sessionStorage
に保存されたデータはページのセッションが終了するときに消去されることです。ページのセッションはブラウザーを開いている限り、ページの再読み込みや復元を越えて持続します。 新しいタブやウィンドウにページを開くと、新しいセッションが開始します。 これは、セッション Cookie の動作とは異なります。
注意すべき点として、sessionStorage
は はそのページのプロトコル固有です。 特に、http://example.com
のような HTTP で読み込まれているページにおける localStorage
は、https://example.com
のような対応する HTTPS で読み込まれているページにおける localStorage
とは異なるオブジェクトを返します。
構文
// sessionStorage にデータを保存する
sessionStorage.setItem('key', 'value');
// sessionStorage に保存したデータを取得する
var data = sessionStorage.getItem('key');
// sessionStorage に保存したデータを削除する
sessionStorage.removeItem('key')
値
例外
SecurityError
-
リクエストがポリシーの決定に反している、またはオリジンが妥当な scheme/host/port tuple でない (これは例えば、オリジンが
file:
やdata:
スキームを使うときに起こります)。例えば、ユーザーがブラウザー設定で特定オリジンへのデータ永続化のパーミッションを拒否していることもあります。 なお、ユーザーが Cookie をブロックしている場合、ブラウザーはこれをデータ永続化の拒否と解釈する可能性が高いです。
例
以下のスニペットは、現在のドメインのセッション Storage
オブジェクトにアクセスして、Storage.setItem()
を使用してデータアイテムを追加します。
sessionStorage.setItem('myCat', 'Tom');
以下の例はテキストフィールドの内容を自動的に保存して、ブラウザーが意図せず再開されたときに、記入した内容を失わないようにテキストフィールドの内容を復元します。
// 追跡するテキストフィールドを取得する
var field = document.getElementById("field");
// 自動保存された値があるかを確認する
// (これはページが意図せず再開された場合にのみ存在する)
if (sessionStorage.getItem("autosave")) {
// テキストフィールドの内容を復元する
field.value = sessionStorage.getItem("autosave");
}
// テキストフィールドの変更をリッスンする
field.addEventListener("change", function() {
// セッションストレージオブジェクトに結果を保存する
sessionStorage.setItem("autosave", field.value);
});
メモ: 詳細な使用例は Web Storage API の使用 の記事を参照してください。
仕様書
Specification |
---|
HTML Standard # dom-sessionstorage-dev |
ブラウザーの互換性
BCD tables only load in the browser