普段何気なく使っている技術や言葉について、表面的な知識にせず、しっかりとイメージできるまで自分なりに調べて整理し、理解するシリーズ。
目次
Cookieとは
正式には HTTP Cookie という名称で、一般的には略してCookieと呼びます。
Cookieは、クライアント側に保存される情報のことで、Webサイトの訪問者の情報を一時的に保存します。
例えばECサイトに訪問した時に既にログイン状態になっている、以前カートに入れた商品が残っているなどは、Cookieによって実現されています。
Cookieの構成
Cookieの構成は、サーバー側で設定することができます。nameとvalueは必ず設定しなければならず、それ以外の値に任意設定です。
- name: Cookie名
- value: Cookieがもつ値
- expires: Cookieの有効期限を設定
- domain: Cookieが発行されるドメインを設定
- path: Cookieが発行されるパスを設定
- secure: アクセス先がSSLを実装しているような安全なサイトの場合のみ、Cookieを発行するように設定
1st party Cookieと3rd party Cookie
ユーザーが訪れたサイトである発行元のCookieが1st party Cookieと呼ばれ、ログイン情報などが保存されます。一方、広告などのサーバーから発行されたユーザーが訪れているサイトではない発行元のCookieが3rd party Cookieになります。
まとめると以下のような違いがあります。
- 1st Party Cookieは、ユーザーが訪れたサイト(自社サイト)での用途に使う
- 3rd Party Cookieは、ユーザーが訪れたサイトでないサイト(他社サイト)での用途に使う
広告はターゲティングや効果測定のためにサイトをまたがってユーザーを識別する必要があります。これを実現するために3rd Party Cookieを使用しています。
3rd Party Cookieにより、ユーザーがどんなサイトを見ているかなどの情報を収集できてしまいます。
そのため、個人情報保護の観点からAppleはITP (Intelligent Tracking Prevention) という仕組みを自社ブラウザであるSafariに導入し、広告目的のクッキー(Cookie)の使用が制限され始めています。
Session
Sessionは通信における開始から終了までの一連の処理のことで、ここではCookieを使用した一連の操作・仕組みのことを指します。
Sessionはログイン情報など、ユーザーと紐づく情報をサーバー側に一定期間保存しておくことができます。
CookieとSession
SessionにIDを割り振って管理し、保持されたSessionが欲しいときはIDを指定して取り出します。
クライアント側でこのSessionIDをCookieに格納し、CookieはHTTPリクエスト時に自動的にCookie情報を送受信するため、サーバー側は送信されたSessionIDを元にユーザーの識別が可能となります。
クライアント側はSessionのIDは改ざんできても関連している中身はサーバーにあるからデータの改ざんすることはできません。
このようにCookieを利用することで、Session管理をすることができます。
Web Storageとは
Web Storageはクライアント側にデータをローカル環境に記録するための仕組みです。
同じような仕組みとしてCookieが使われていますが、Web Storageはより高機能で扱いやすくなっています。ほとんどのモダンブラウザがWeb Storageに対応しており、InternetExplorerもバージョン8以上から対応しています。
Web Storageの使いどころ
Web Storageはクライアント側からアクセスできるデータベースのような役割をしています。
そのため、クライアント側であるJavascriptからアクセスしてメリットがあるような使い方をすると良いかと思います。
例えば以下のような場合に効果を発揮します。
- お知らせや通知など表示に関する各種設定情報
- お気に入りや商品のカート追加などのユーザーによる操作やアクションによる情報
Web Storageの種類とCookieとの比較
Web StorageはさらにlocalStorageとsessionStorageの2種類に分かれ、保持するデータの有効期限に違いがあります。
| 有効期限 | データ量 | サーバへのデータ送信 | |
| Local Storage | 永続的に有効 | ドメインに対して5MB | データ利用時のみ |
| Session Storage | ウィンドウ・タブを閉じるまで | ドメインに対して5MB | データ利用時のみ |
| Cookie | ウィンドウ・タブを閉じるまで、または指定期限まで | 4KB | リクエスト毎に自動送信 |
CookieとWeb Storageの共通点と違い
共通点
- クライアントから参照をすることができる
- 保存するデータをKey-Valueで保存する
異なる点
- Web Storageは大きなデータ量を簡単に取り扱える
- Cookieは通信ごとに毎回自動で送信される
また大きな用途の違いとして、Cookieの情報はサーバーサイドが使用するのに対し、Web Storageはクライアントサイドからしか参照することができません。
基本的にはCookieにはJavascriptからアクセスできず、Web StorageはJavascriptによってアクセスできるため、サーバーで参照する必要がないデータはWeb Storageで格納すると良いでしょう。
Web StorageとCookieを比較した場合、通信量やセキュリティなどほとんどの面でWeb Storageに軍配があがりますが、CookieはHTTPリクエスト時に自動的にCookie情報を送受信するため、単純にサーバー側プログラムとの連携を考えると、Cookieの方が扱いやすいといえます。
参考
Web Storageでローカルに情報を記録する - 第3章 応用・JavaScript関連技術 - [SMART]
