0531

脳内OUTPUT-ただのメモ書き-

cookieとwebストレージについて考える

javascript関連 ◯◯について考える

cookieとwebストレージの違い

cookieとローカルストレージ。 どちらもwebコンテンツを作るのには必要な技術らしい。 今回は、cookieとwebストレージの謎に迫る

そもそもふたつともどういうモノ？

どちらもブラウザ上でデータを保存し、別の場所で使いたいときに利用する機能。 例えば、あるページでフォームの入力欄があり、遷移した次のページで入力したデータを使いたい場合。

cookieって？

cookieは、Webサイトの提供者が、Webブラウザを通じて訪問者のコンピュータに一時的にデータ> を書き込んで保存させる仕組み。 cookieにはWebサイト(Webサーバ)側が指定したデータを保存しておくことができ、利用者の識別> や属性に関する情報や、最後にサイトを訪れた日時などを記録しておくことが多い。 ネットサービスなどのサイトで利用者のIDなどが保存されると、次にアクセスしたときに自動的に> 利用者の識別が行われ、前回の続きのようにサービスを受けることができる。 1つのCookieには4096バイトのデータを記録でき、1台のサーバが同じコンピュータに対して発行できるCookieの数は20個に制限されている。Cookieの総数は300個までで、これを超えると古い方か> ら削除される。また、個々のCookieには有効期限が設定されており、期限を過ぎたものは破棄される。

cookieの特徴

  • 軽いデータのやり取りに向いている
  • 4KBまでしかデータを保存できない
  • サーバーに繋ぐ度にデータを送信する

webストレージって？

webストレージは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した「クッキーの後継技術」ともいえる。

どっちがいいの？

旧来（＝HTML 4.1以前）のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。しかし、クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。 HTML5では、クッキーに代わるデータ保存の仕組みとして、「Web Storage」と呼ばれる機能を利用できる。 Web Storageは、クッキーよりもデータ保存容量が大きくなり、有効期限もないので、クライアントサイドでのデータ管理を行いやすくなる。また、クッキーのようにすべてのリクエストに対してデータを自動で送信しないので、クッキーよりはセキュアに利用できる。なお、ブラウザによっては、データの保存容量が5MBytesより大きいものもあるが、クロスプラットフォームを意識した場合、W3C勧告に従った5MBytesを上限とした利用を推奨する。 Web Storageは、次の表のとおり、現在、リリースされている主要なブラウザでは実装済みで、デスクトップ端末／スマートフォン／タブレット端末など、多くのデバイス上で役に立つ機能といえるだろう。

webストレージは2種類ある

sessionStorage

ウィンドウごとのセッションで有効なストレージ。ウィンドウやタブが開いている間、Webアプリケーション利用に関するデータをそれぞれの単位で保存し、ウィンドウ／タブが閉じられると、データは失われる。ウィンドウ／タブ間では異なるsessionStorageとなり、共有はできない。

localStorage

Webアプリケーション利用者のブラウザ内に永続的にデータを保存するストレージ。保存は「http://www.atmarkit.co.jp:80/」のように「ドメイン:ポート番号」の組み合わせの「オリジン」単位で実施される。オリジンが同じであれば、ウィンドウやタブ間でデータを共有でき、また、一度、ブラウザを閉じて、再度アクセスしたときでもデータを共有できる。

つまり

sessionStorageの利用方法として、例えば、「ブラウザ起動後の初回アクセスのみ、アプリケーションのチュートリアル部分をムービーで表示したい」というシナリオもあるだろう。そこで、「ムービーを表示した」という情報をsessionStorageに保存することで簡単なフラグ分岐などができる。 localStorageの利用方法として、例えば、Webページ閲覧・利用者が選択した背景色や文字色のテーマなどをlocalStorageに保存することで、Webアプリケーションでありながら、エンド・ユーザー環境をレジストリのように維持することもできる。 　このようにsessionStorage／localStorageは、「セッション接続の間だけ利用したいか」「永続的に情報を保持したいか」という用途に応じて使い分けることになるだろう。

注意点

どちらをつかうにしても個人情報の取り扱いには注意が必要。 必要がなければその都度削除する。

結論

cookieよりwebストレージでしょ。 とりあえず、両者の概要はこれを読もう！

連載：人気順に説明する初めてのHTML5開発：ブラウザでストレージ？ Web Storageを使いこなそう (1/3) - ＠IT