🌟

cookieとは?

2024/05/31に公開

cookieについて

Cookieの流れ

  1. ブラウザにアクセスしたタイミングで、WebサーバーからCookieが発行され、ブラウザに渡される。
  2. ブラウザはCookieを保存する。
  3. 次回以降ブラウザは、CookieとともにWebサーバーへアクセスする。
  4. WebサーバーはCookieの内容に合わせて、必要な情報を踏まえたページを表示する。

このような仕組みがあり、
別ページに移動した際にもログイン情報を破棄することはなくなります。

すなわち、会員サイトへのログインはCookieを使用することで、ログイン状態を保持したまま別ページに移動することができるのです。

要約すると、一度cookieを使用してログインすると、そのデータを保持してくれているので、
違うページに行きたいときなどにメールアドレス等ログインに必要なものを入力しなくて済むという便利な機能です

検証ツールで見るとこのようになっています。

cookieの注意点

cookieは容量が小さく、データが重いものに関しては不向きです。

では、このような場合、どうしたら良いか?

ローカルストレージ

図の上にあるように、ローカルストレージというものがあります。

ローカルストレージ利点

  • cookieのようにWEBサーバーにデータを保存するのではなくブラウザに保存するので、
    ブラウザを閉じてもユーザーの入力情報などを保持し続けることができます。

  • 保存容量が大きい
    主要なブラウザなら5MBまでデータを保存できます。

ローカルストレージ注意点

  • データは永続的に保存される
    →わざわざ処理を書かなくても、設定で例えば5年など保持して欲しいデータ期限を設定すると自動的に消えてくれます。
    設定ではしない場合、データは永続的に残り続けるので削除する処理を書きましょう。

  • Javascriptから自由にアクセスできる
    セキュリティ上非常に大きな注意点です。
    これは、アクセスできますが、cookieも違う方法をしてアクセスしようとしたらアクセスは可能です。

参考記事
https://qiita.com/masuda-sankosc/items/cff6131efd6e1b5138e6

Discussion