しらべものドット宇宙HTMLコーダーが必死こいて〇〇〇を目指すブログ

同日2回目のアクセス、Cookieで実装するか？Web Storage API で実装するか？Indexed DB API で実装するか？

同日2回目以降のアクセスを検知するとき、参考サイトではCookieを使っていたので、Cookieの使用が適切なのか自信がなかったので、調べてみました。

参考サイト：

ローディング -同日2回目のアクセスでローディング画面非表示-
https://coco-factory.jp/ugokuweb/move01/4-1-7/

結論：同日2回目のアクセスを検知するのであれば、localStorage （Web Storage API）を使うのが良さそう。

以下、調査履歴です。

Cookie（クッキー）について

HTTP Cookie の使用 | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies

クッキーは、2つのリクエストが同じブラウザから送信されたものであるかを調べるためによく使われる。

クッキーは、（1）セッション管理、（2）パーソナライズ、（3）トラッキング の用途で使われる。

クッキーは、サーバがブラウザに送信し、ブラウザに保存され、その後リクエストとともに同じサーバへ返送されるような仕組み。

クッキーは、ステートレスなHTTPプロトコル。
※ ステートレスとは、同じ接続であっても、リクエスト同士が独立していること。

クッキーは、すべてのリクエストで送信されるため、モバイルでのデータ通信性能を悪化させることがある。 >> Web Storage API や IndexedDB を使うことが推奨されている。

Web Storage API について

Web Storage API | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API

Web Storage API は、クッキーよりも直感的な方法でキーと値のペアをブラウザが保存する仕組み。

ブラウザでページを表示している時に使える保存領域を管理する。

Web Storage APIは2種類の仕組みがある。→ sessionStorage と localStorage

Web Storage API は、URL（オリジン）毎にそれぞれsessionStorage と localStorageは別のStorageオブジェクトを使い、制御する。
※ オリジンとは、URLのプロトコル・ドメイン・ポートによって定義されている。

Web Storage APIの仕組み（1） – sessionStorage

  • ブラウザやタブが開かれている間のみ保存される。
  • データがサーバへ転送されることはない。
  • 最大5MBまで保存できる。

Web Storage APIの仕組み（2） – localStorage

  • ブラウザやタブを閉じたり再び開いても保存が続く。
  • クッキーと違い、有効期限なしでデータを保存できる。
  • jsによる操作や、ブラウザキャッシュ/ローカルに保存したデータのクリアによってデータがクリアされる。
  • 最大容量がクッキーやsessionStorageよりも大きい。
  • localStorageの操作は、Window.localStorageプロパティを通して使う。（厳密には、Windowオブジェクトに実装されているWindowLocalStorageオブジェクトのLocalStorage。）
  • localStorageはStorageオブジェクトのインスタンスを生成して、データの保存・取り出し・削除ができる。
  • localStorage は利用できないシーンも数多くあるため、.setItem() するときには必ず例外をキャッチするような対応を行う。

IndexedDB API について

IndexedDB API | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

IndexedDB APIは、ファイルやblobを含む大量の構造化データをブラウザ側で保存する。
IndexedDB APIは、APIを使って高度なデータ検索ができる。
IndexedDB APIは、構造化された、非常に多くのデータを扱うことができる。

再度結論：同日2回目のアクセスを検知するのであれば、localStorage （Web Storage API）を使うのが良さそう。

クッキーはすべてのリクエストで送信されるため、モバイルでの通信性能を悪くしそう。 → Web Storage API もしくは、Indexed DB API の利用を推奨。 → 大量の構造化データを扱う Indexed DB API よりも、Web Storage API を使う方が良さそう。 → sessionStorage はページを閉じると消えちゃう。 → localStorage を使うのが良さそう。