ブラウザストレージと言えば、cookieよりもHTML5のWeb Storage！！

広島　屈辱の東京Ｄ１３連敗　４タコ栗原は２軍落ち
東京ドームでこれっぽっちも勝てません。勝てる方法を知っている方、教えてください(涙目)

んで、ブラウザストレージ用のAPIとしてHTML5で追加された、Key-Value型データストアのWeb Storageについて。

Amazonの「この商品を買った人はこんな商品も買っています」のページ番号をsessionStorageで保存したり、あとは、フォームの入力内容の保存とか、ゲームのプレイ履歴の記録なんかの用途でも使われてると思われます。

従来ブラウザストレージとして使われてきたcookieの後継技術だー、cookieより便利だーなんて言われてるけど、具体的なcookieとの違い、特徴はこんな感じ。

(1)保存容量
cookie：4Kbyte
Web Storage：5Mbyte

(2)データの有効期限
cookie：あり ※指定期限まで有効
Web Storage：なし

(3)セキュリティ
cookie：サーバへアクセスする度に毎回自動送信。自動送信なので、セキュリティは低い。
Web Storage：自動送信なし。セキュリティの確保は実装に依存する。

(4)通信量(トラフィック)
cookie：サーバーに自動送信するから、通信量は多くなる。
Web Storage：Javascriptで登録／参照し、クライアントサイドで処理が完結するから、余計な通信がない。でも結局は実装に依存する。

(1)の容量に関して、Web Storageはオリジン(プロトコル+ドメイン:ポート番号)単位で5M使える。
http://ohsexybaby.com:80 で5M、
https://ohsexybaby.com:443 で5M。

あと、Web Storageには2種類あって、永続的にデータを保存する「localStorage」と、
ウィンドウやタブが開いている間、データを保存する「sessionStorage」がある。
※オリジン単位の「localStorage」と「sessionStorage」を合わせて5Mの保存が可能。

localStorageは、ウィンドウやタブを閉じても残っているけど、sessionStorageは、ウィンドウやタブを閉じると削除される。

(2)のデータの有効期限に関しては、Web Storageは有効期限がない。
ただ、有効期限がない分、「localStorage」にゴミデータが溜まらないような実装が必要。

(3)のセキュリティに関しては、サーバーに自動送信するcookieよりは、Javascriptで制御できるWeb Storageの方がセキュリティは高い。けれども、Web Storageに保存していても、XSSなどの対策をしていないと、データを盗まれる可能性がある。

あと、Web Storageは、http://ohsexybaby.com:80のlocalStorageに保存したデータは、http://carp.com:80からは登録／参照不可。これはまー当然っちゃ当然。

(4)通信量については、Web Storageに登録／参照する分には、サーバーとの通信はない。
Web StorageのデータをDBに登録したり、逆にDBから引っ張ってきたデータを、Web Storageに保存するような実装にすれば、もちろん通信は発生する。

ただ、毎回サーバーに自動送信するcookieと比べて「余計な通信が発生しない」という点で、Web Storageの方がトラフィックは抑えられる。

というわけで、容量たくさん使えるし、レスポンス速いし、セキュリティもcookieより上だしのWeb Storageですが、なんだかんだ最終的には設計／実装に依存するんで、頑張っていきましょう。