Web Strageとは？
ユーザのローカル環境(ブラウザ)にデータを保存するための仕組み。
データの取得や削除などの操作はJavaScriptを介して行われる。
データをkey-valueペアのリスト構造で保存するなど、HTTP cookieと似た仕組みになってる。
HTML5からの新実装で、モダンなブラウザは対応済み。
以下の異なる２種類の仕組みがある。
- sessionStorage
- localStorage
比較表
| 保存方法 | 異なるWindow間の データ共有 |
データの 有効期限 |
データ量の上限 | サーバへの データ送信 |
|---|---|---|---|---|
| HTTP cookie | O | 指定の期限まで | 4KB | アクセスのたびに 毎回自動で送信 |
| sessionStorage | x | セッション中のみ | オリジンごとに5MB | 必要のたびに フォーム等で送信 |
| localStorage | O | 永続的に有効 | オリジンごとに5MB | 必要のたびに フォーム等で送信 |
＊ セッション
ページの再読み込みや復元を含むブラウザを起動している間のこと
＊ オリジン
ページにアクセスする際のURLにおける、プロトコル(スキーマ)からドメイン(ホスト)およびポートまでのこと
HTTP cookieと比較した場合のメリット
-
使えるデータ量が多い
アプリケーションのデータをブラウザにキャッシュして再利用したい場合に便利 -
サーバへのデータ送信を制御できる
Web Strage利用の注意点
-
Stringデータしか保存ができない
(HTTP cookieも同じだけど)Stringで表現できないデータは保存できない -
同期処理
(HTTP cookieも同じだけど)同期処理なので複雑な処理中と合わせて使うとパフォーマンスが下がる -
WebWorkerから利用できない
なのでバックグラウンド処理ができない -
あらゆるJavaScriptコードから自由にアクセスできる
データ保護的なものもないので、全くもってセキュアじゃない
Web Strageを使うシチュエーション
- 秘密情報を一切含まない
- 公開されても大丈夫な情報のみを含む
- 5MBを超えないデータである
- Stringデータのみを取り扱う
- 保存するアプリケーションでパフォーマンスを要求されないこと
じゃあWeb Strageに保存するべきでないデータはどうするの？
秘密情報を管理する場合
サーバーサイドセッションを使う。
そして、セキュリティ対策を十分に実施する。
セキュリティについては以下を参照。
(秘密情報ではない)Stringデータで扱えないデータの場合
IndexedDBを利用する。
オフラインキャッシュでもデータを参照したい場合
Service Workerを利用する。