localStorage and sessionStorage
localStorage は window プロパティの読み取り専用プロパティで、この Document の origin における Storage オブジェクトにアクセスできます。格納されたデータは、ブラウザーのセッションを跨いで保存されます。
localStorage は sessionStorage によく似ていますが、 localStorage のデータには期限がないのに対し、 sessionStorage のデータはページセッションが終了したとき、すなわちページが閉じられたときにクリアされます。(「プライベートブラウジング」や「プライバシーモード」のセッションに読み込まれた文書の localStorage のデータは、最後の「プライベート」タブが閉じられたときにクリアされます。)
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 4 | 12 | 3.5 | 4 | 18 | 3.2 | |
| Storage はウェブストレージ API のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供して、例えば保存されているデータアイテムを追加、変更、削除することができます。 | 4 | 12 | 3.5 | 4 | 18 | 3.2 |
| clear() は Storage インターフェイスのメソッドで、指定された Storage オブジェクトに格納されているすべてのキーを消去します。 | 4 | 12 | 3.5 | 4 | 18 | 3.2 |
| getItem() は Storage インターフェイスのメソッドで、キーの名称を渡すと、そのキーに対する値を返します。指定された Storage オブジェクトにそのキーが存在しない場合は null を返します。 | 4 | 12 | 3.5 | 4 | 18 | 3.2 |
| key() は Storage インターフェイスのメソッドで、数値 n を渡すと、指定された Storage 内で n 番目のキーの名称を返します。キーの順序はユーザエージェント依存であり、この順序に頼るべきではありません。 | 4 | 12 | 3.5 | 4 | 18 | 3.2 |
| length は Storage インターフェイスの読み取り専用プロパティで、Storage オブジェクトに保存されているデータアイテムの数を表す整数を返します。 | 4 | 12 | 3.5 | 4 | 18 | 3.2 |
| removeItem() は Storage インターフェイスのメソッドは、キーの名前を渡すと、指定された Storage からキーを削除します。 Storage はウェブストレージ API のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供します。 | 4 | 12 | 3.5 | 4 | 18 | 3.2 |
| setItem() は Storage インターフェイスのメソッドで、キーの名前と値を Storage オブジェクトに渡すと、ストレージにキーを追加したり、またはキーがすでに存在する場合はキーに対する値を更新したりします。 | 4 | 12 | 3.5 | 4 | 18 | 3.2 |
| StorageEvent インターフェイスは Window/storage_event イベントによって実装され、ウィンドウがアクセスするストレージ領域が他の文書のコンテキスト内で変更されたときにウィンドウに送られます。 | 1 | 12 | 13 | 4 | 18 | 3 |
| StorageEvent インターフェースの key プロパティは、変更されたストレージ項目のキーを返します。 | 1 | 12 | 13 | 4 | 18 | 3 |
| StorageEvent インターフェースの newValue プロパティは、値が変更されたストレージ項目の新しい値を返します。 | 1 | 12 | 13 | 4 | 18 | 3 |
| StorageEvent インターフェースの oldValue プロパティは、値が変更されたストレージ項目の元の値を返します。 | 1 | 12 | 13 | 4 | 18 | 3 |
| StorageEvent インターフェースの storageArea プロパティは、影響を受けたストレージオブジェクトを返します。 | 3 | 12 | 13 | 4 | 18 | 3 |
| StorageEvent() コンストラクタは、新しい StorageEvent オブジェクトを作成します。 | 17 | 17 | 13 | 6 | 18 | 6 |
| StorageEvent インターフェースの url プロパティは、ストレージが変更されたドキュメントの URL を返します。 | 6 | 12 | 13 | 5 | 18 | 5 |
| sessionStorage プロパティは読み取り専用で、セッションの Storage オブジェクトにアクセスできます。sessionStorage は Window.localStorage に似ています。唯一の違いは、localStorage に保存されたデータに期限がないのに対して、sessionStorage に保存されたデータはページのセッションが終了するときに消去されることです。 | 4 | 12 | 2 | 4 | 18 | 3.2 |
| storage イベントは、保存領域 (localStorage) が変更されたときに発生します。詳しくはウェブストレージ API をご覧ください。 | 1 | 15 | 45 | 4 | 18 | 4 |
基本構文
localStorage.setItem("myCat", "Tom"); 実務での使いどころ
-
localStorage and sessionStorage の活用
localStorage は window プロパティの読み取り専用プロパティで、この Document の origin における Storage オブジェクトにアクセスできます。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。