CookieとWebストレージ

クッキー

インターネット使用記録を削除しようとすると、上記の画面が表示されます.履歴、Cookie、その他のサイトデータ、キャッシュされた画像とファイルを削除するかどうかを選択する必要があります.いいえでもクッキーを削除するとほとんどのサイトがログアウトするそうです

なぜサイトCookieを削除するとログアウトするのですか?

Cookieがなければ、すべてのことは要求と応答によって完成します.正確に言えば、以前の通信内容は覚えていません.なのでログインして他のページに移動すると、ログインした内容が覚えられないので、再ログインする必要があります.
この場合、Cookieは以前の通信内容を記憶することができる.Cookieはステータスを持たないHTTPプロトコルでステータス情報を記憶する役割を果たしているため、削除すると多くのサイトがログアウトします.

Cookieはログインにしか使えませんか?

そうではありません.以下に示すように、さまざまな用途に使用されます.

セッション管理

パーソナライズ
ユーザ選好、件名等の設定

トレース
ユーザーの行動を記録および分析するための

🏃🏻‍♀️Cookieの旅に従いましょう。

ブラウザ->サーバ

hello.worldに最初の接続要求を送信します.このとき頭にクッキーに関する情報はありません.

Request Headers

GET /index.html HTTP/1.1
Host: www.hello.world
...

サーバ->ブラウザ

サーバは応答をブラウザに送信します.中にはクッキーが入っていますねthemeのようなクッキーはsessionTokenとは異なり、expiresが指定されていないため、sessionクッキーになります.セッションCookieは、ブラウザが閉じたときに期限切れになります.

Response Headers

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: theme=light
Set-Cookie: sessionToken=abc123; Expires=Wed, 09 Jun 2021 10:18:14 GMT
...

ブラウザ->サーバ

同じホストの別のページにリクエストを送信します.以前サーバによって保存されていたCookieを含むリクエストを送信します.そして、サーバーはこのCookieを受け取り、以前に交換されたことを知っています.

Request Headers

GET /spec.html HTTP/1.1
Host: www.hello.world
Cookie: theme=light; sessionToken=abc123
…

🚨 session cookie,永久cookie

Session cookie
彼は、Cookieのスケジュールを見て期限が分からない場合は、セッションCookieになると言った.これはブラウザが閉じた後に消えるCookieを意味します.

Permanent cookie
これとは異なり、ExpiresまたはMax-ageを使用して有効期限を指定すると、永続的なCookieになります.誰もクリアしていない場合は、ブラウザを閉じても有効期限まで保存されます.

では、このクッキーはどこに保存されていますか?

コンピュータに格納されます.よろしければ、開けてもいいです.通常はサーバによってユーザー側に格納されますが、JavaScriptを使用してクライアントで設定することもできます.これらの保存されたCookieは、同じサーバにリクエストを送信するたびに一緒に送信されます.(もちろん、他のサーバで作成したCookieには送信されません.)今、クッキーの最大容量は4 KBだと少し理解できます.各リクエストは1回送信されますが、1 MBのみで1000回往復すると1 GBになります.サーバー側の負担が大きいでしょう.

[好奇心があれば読んでください]会話は何ですか。

Cookieを探すと、会話に関する話も自然とついてきます.2つは何か関係があるようですが、会話が何なのか感じません.まず、セッション自体がサーバに格納されます.サーバに格納されているセッションのidはCookieによって格納されていると見なすことができます.これは、すべての情報をCookieに格納したいため、セキュリティが悪いため、情報はサーバに格納され、情報のキー値はCookieに格納されます.結局、セッションもCookieを使う方法の一つです.

Webストレージ

HTML 5には、Cookieなどのクライアントに情報を格納するWebリポジトリが追加されている.Cookieとの最大の違いは、通信のたびに送信されないことです.これらの特性はブラウザによって異なりますが、Cookieの最大容量4 KBとは異なり、その最大容量は約5 MBです.Webストレージには、ローカルストレージとセッションストレージの2種類があります.

Local Storage

ユーザーがパージしない場合、データは永続的にパージされません.

データの挿入

オブジェクトを保存する場合は、JSON.stringifyを使用して文字列に変換して保存する必要があります.

localStroage.setItem(<KEY>, <VALUE>);

データの問合せ

オブジェクトを受信する場合は、JSON.parseを使用して文字列に変換する必要があります.

const data = localStorage.getItem(<KEY>);

Session Storage

データ挿入によるクエリーの削除方法はlocalStorageと同じです.ただし、ブラウザタブを閉じると、ローカルストレージとは異なり、データは消えます.

リファレンス

[Web][もう少し注意]いったいなぜ名前がCookieなのでしょうか?保存状態のhttpcookie

MDN HTTP Cookie

ウィキペディアビスケット