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

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

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

従来ブラウザストレージとして使われてきた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ですが、なんだかんだ最終的には設計/実装に依存するんで、頑張っていきましょう。

Related posts:

  1. これは便利!!cookieを操作/監視するプラグイン※Chrome,Firefox編
  2. Google Chrome(PC)でスマートフォンサイトをチェックできる便利なエクステンション
  3. Google Chrome(PC)で広告をブロックできる便利なエクステンション
  4. 好きなチームに絞ったニュースが読める!!プロ野球ファン最高のAndroidアプリ
  5. プロ野球ファン必見!!試合速報Androidアプリ