JavaScriptでは、クライアントにデータを保存する仕組みとしては、従来はクッキーを使ってきましたが、現在は「Web Storage(ストレージ)」による保存が通常になっています。
クッキーとストレージの違い
蓄積できるデータサイズが異なるという以外にも、下記のような違いがあります。
| 項目 | ストレージ | クッキー |
|---|---|---|
| サイズの上限 | 5MB | 4KB |
| データの有効期限 | なし | あり |
| データ通信 | 発生しない | リクエストの都度、サーバーに送信する。 |
ストレージの分類
ストレージは、下記の2種類に分かれます。
- ローカルストレージ(Local Storage)
- セッションストレージ(Session Storage)
ローカルストレージ(Local Storage)
オリジン単位でデータを管理しています。
ウインドウ、タブをまたいでデータ共有が可能で、ブラウザを閉じてもデータは維持されます。
オリジンとは？
「スキーマ名://ホスト名:ポート番号」の組み合わせの単位のことです。他のオリジン（他のURLのページ）からは、セキュリティ上、データを読み出せないようになっています。
実装
ローカルストレージに値を格納する。
|
1 |
localStorage.setItem("キー", "バリュー"); |
実戦では、文字列だけじゃなくオブジェクトなどを格納したいことも多いでしょう。その場合はJSON.stringifyメソッドによってstring型に変換して格納します。
|
1 |
localStorage.setItem("キー", JSON.stringify(格納したいオブジェクト)); |
ローカルストレージから値を取り出す。
|
1 |
localStorage.getItem("キー"); |
このままではオブジェクトも文字列として取り出されてしまいますので、オブジェクトに変換して取り出す際は、JSON.parseメソッドを使用して取り出します。
|
1 |
JSON.parse(localStorage.getItem("キー") as string) |
「as string」はTypeScriptの場合に念のためつけておきましょう。
セッションストレージ(Session Storage)
現在のセッション（ブラウザを開いている間）だけ維持されるデータ管理です。
ブラウザを閉じたタイミングで、データは書きされて、ウインドウや、タブをまたいでデータ共有をすることはできないです。
「ローカルストレージ」を利用するか、「セッションストレージ」を利用するか？
「ローカルストレージ」には下記の問題があるため、優先度的には、まずは「セッションストレージ」の採用を検討するとよいでしょう。
それで、どうしてもまかなえない場合は、「ローカルストレージ」の使用をします。
ローカルストレージの問題点
- 明示的にデータを削除しない限りは消えないので、ゴミが残りやすい
- 同一のオリジンで複数アプリを稼動している場合は、変数名が衝突しています。
現在使われているWeb Storageの内容を確認するには？
Google Chromeの開発者ツールで確認することができます。
この記事へのコメントはありません。