#CookieとWebStorageの違いまとめ
アプリを作ってるとCookieとWeb Storageどっちがいいんだろうなんてことがあったりするので、良い機会なのでまとめておくことにします。
Web StorageにはSessionStorageとLoacalStorageの二種類があるので、全部対比してみます。
| 項目 | Cookie | Local Storage | Session Storage |
|---|---|---|---|
| 保存場所 | ブラウザ | ブラウザ | ブラウザ |
| データの型 | 文字列のみ | 文字列のみ | 文字列のみ |
| 有効期限 | 任意に設定 | 消さない限り半永久的 | セッションやタブを閉じるまで |
| 保存容量 | 最大4KB | 5MB～10MB | 5MB～10MB |
| サーバにデータ送信 | 自動送信する | しない | しない |
| 操作する人 | サーバー側の言語が多い(php等) | jsのみ | jsのみ |
ざっとこんな感じですかね？
WEBストレージは、保存容量が大きいですね。幅があるのはブラウザによって違うからです。あとはサーバー側にいちいちデータの通信をしないところがクッキーとの大きな違いですね。
ちなみに、ローカルストレージはオリジン単位（プロトコル://ドメイン名:ポート番号）でデータを保存するので、当然、別ウィンドウやブラウザを閉じてもデータは共有され続けます。一方、セッションストレージは同じドメインのサイトを別々のウィンドウで開いていても、それぞれが別のsessionStorageとなることに注意っす。
クッキーはWEBストレージより有効期限が自由に設定できますね。
クッキーはサーバー側からクライアントに対してクッキーをセットするようにレスポンスを返す必要があるので、サーバー側の言語で書かれることが多いです。一方、WEBストレージは完全にクライアント側の操作なので基本的に値の取得だろうとセットだろうとjsでしか操作しません。
#Sessionについて
SessionとCookieってどう違うんですかという質問がちょこちょこありますのでこっちも書いておこうかと。（Sessionは本来Cookieをもとに成り立っている仕組みだからそもそも質問自体がちょっと変だったりするのですが、かくいう僕も昔はちんぷんかんぷんだったので気持ちわかりまくります）
Sessionとは「ある一連の処理の始まりから終わりまで」を意味する概念で、（例えばログインしてもろもろの操作してログアウトするまで）一連の流れを管理できるように「クッキー」や「ファイル」などを使ってユーザ識別する仕組みのことっす。
本来HTTP通信はステートレスなのでHTTP通信単体では情報の維持ができません。オンラインショッピングとかログインしてあれこれだとかユーザに紐づいた処理をするには、こういう仕組みが必要になるわけです。
Sessionの管理方法は色々とあるらしいんですけど、一般的なのはCookieとファイルを用いた管理方法ですかね。
仕組みとしては、sessionIDという一意のIDをユーザのクッキーに保存し、さらにそのIDに紐づくセッションファイルをサーバーのハードディスク上に作成します。（PHPならsession_startという関数がこれをしてくれる）
その後の通信ではクッキーにsessionIDがあるかどうかを常に確認し、追加のセッション情報を保存するときはIDに紐づくセッションファイルにどんどん値を追加していくことになる感じですね。
ただ、もちろん方法はこれだけじゃないです。
例えば、クッキーを用いずにGetパラメタにSessionIDを仕込んだり、ファイルじゃなくてRedisなどのKVSに、SessionIDに紐づくデータを格納したりする場合もあります。
まあ要するに、「ユーザに対して一意のIDを割り振ってユーザ識別を可能にして、そのIDに紐づくデータを一定期間内サーバー上で保存する」ことが達成できればいいわけですね。
そんなわけで、Sessionとクッキーやウェブストレージは全然別物で、Sessionはある一連の処理の流れをステートレスなHTTP通信の中で達成するための仕組みで、クッキーやウェブストレージは単にクライアント側に値を保存する機能のことですね。
こんな感じになりますかね？
僕自身もそこまで詳しいわけではありませんので、ご指摘あったらお願い致します。
ではでは！！