ライブのプレイグラウンドでlocalStorageを試し、保存した設定、ショッピングカート、テーマの実用的な例をコピーできます。JSONの扱い、容量制限、エラー、タブ間の同期も解説します。
localStorageは、オリジンごとにキーと値を保存するブラウザーの仕組みで、タブやブラウザーを閉じてもデータが残ります。保存にはsetItem(key, value)、読み取りにはgetItem(key)、削除にはremoveItem(key)、全消去にはclear()を呼び出します。値は常に文字列なので、オブジェクトはJSON.stringifyとJSON.parseで変換します。
Storage APIのすべてを1枚にまとめた表
ローカルストレージのバグの多くは、3つの意外な性質から生まれます。すべてが文字列に変わること、呼び出しが例外を投げる場合があること、データが1つの正確なオリジンに結びついていることです。下のプレイグラウンドは自分のブラウザーに書き込むので、これらのルールを実際に確認できます。続く例では、設定、ショッピングカート、テーマ切り替えの安全なパターンを紹介します。
MDNによると、現在のブラウザーではオリジンごとにlocalStorageが5 MiB、sessionStorageが別に5 MiBまでです。文字列はUTF-16で保存されるため、保存できる文字数はバイト数から想像するより少なくなります。上限を超えて書き込むとQuotaExceededErrorが発生します。
ありません。エントリーは、コードで削除するか訪問者がサイトのデータを消去するまで残ります。プライベートウィンドウでは、最後のプライベートタブを閉じたときにブラウザーが消去します。有効期限が必要な場合は、値と一緒にタイムスタンプを保存し、読み取り時に確認しましょう。
setItemは渡されたものを何でも文字列に変換します。普通のオブジェクトは[object Object]というテキストになり、データは失われます。JSON.stringify(obj)で保存し、JSON.parseで読み戻しましょう。
いいえ。ストレージはオリジン、つまりスキーム、ホスト、ポートの組み合わせに属します。http://example.comとhttps://example.comはそれぞれ別のストレージを持ち、サブドメインも同様です。
windowでstorageイベントを監視します。同じオリジンの開いているドキュメントの1つが値を変更すると、ほかのドキュメントでこのイベントが発火し、key、oldValue、newValueが渡されます。変更を行ったタブ自身はこのイベントを受け取りません。
Cookieはリクエストのたびにサーバーへ送られるため、セッションに向いています。ローカルストレージはブラウザーの外に出ることがなく、より多くのデータを保存でき、テーマ、下書き、折りたたんだサイドバーなどのインターフェースの状態に向いています。
データの保存期間と、誰が必要とするかでストレージを選ぶ
ストレージのブロック、容量の超過、壊れたJSONを1か所で処理するので、ほかのコードで対処する必要はありません。
デフォルト値と保存済みの値をマージするため、後で新しい設定を追加しても古い保存データが壊れません。
変更のたびに新しい配列を作って書き戻します。価格は引き続き決済時にサーバーが決定します。
何も保存されていなければ、OSの設定が優先されます。間違ったテーマが一瞬表示されるのを防ぐため、headの早い段階で実行しましょう。
ローカルストレージには組み込みの有効期限がないため、値と一緒に期限を保存し、読み取り時に古いエントリーを削除します。
storageイベントは同じオリジンのほかのすべてのタブに届くため、再読み込みなしでカートのバッジを更新できます。
このブラウザーではストレージがブロックされているため、すべての呼び出しが例外を投げます。コードにフォールバックが必要です。
{name}が発生しました：{message}
先にキーを入力してください。
{call}で{n}文字を保存しました。
{call}はnullを返しました：そのキーのエントリーはありません。
JSON.parseの結果：{value}
保存されたテキストはJSONではありません：{value}
{call}は文字列{value}を返しました
{call}が完了しました。
プレイグラウンドのエントリーを{n}件削除しました。このサイトのほかのキーはそのままです。
自分のブラウザーでエントリーを保存、読み取り、削除し、このサイトが保存しているすべてのキーを確認できます。プレイグラウンドのキーはdemo:で始まるため、サイトのキーと衝突しません。
キー
値
値の種類
プレーンな文字列
オブジェクト（JSON）
保存
読み取り
削除
プレイグラウンドのキーを消去
ここに結果が表示されます。
ブラウザーに保存されたプレイグラウンドのエントリー（{n}）
保存された文字列
無料で始める · クレジットカード不要