Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
152
Help us understand the problem. What is going on with this article?
@pipiox

CookieとWebStorageとSessionについてのまとめ

More than 1 year has passed since last update.

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通信の中で達成するための仕組みで、クッキーやウェブストレージは単にクライアント側に値を保存する機能のことですね。

強いてセッションとクッキーとの違いはと尋ねられたら

クッキーは、
・情報の保存場所はサーバー側になる。(ただしsessionIDの管理でクッキーを使うならブラウザも使うことになる)
・有効期限のデフォルトは24分程度(可変)

こんな感じになりますかね?
僕自身もそこまで詳しいわけではありませんので、ご指摘あったらお願い致します。

ではでは!!

152
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
pipiox
大手化粧品メーカー営業 -> 商社営業 -> ITベンチャー -> ITフリーランスという異色の経歴。 突然嫁から「ぴぴお」と呼ばれだして気に入ったのでもうこれでいきます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
152
Help us understand the problem. What is going on with this article?