Zenn
👻

ブラウザ標準データ保管機能まとめ：Cookie / SessionStorage / LocalStorage / IndexedDB

2023/06/25に公開
cookie
#
ブラウザ
#
indexeddb
#
localstorage
#
sessionstorage
tech

■ はじめに

理解深掘りのため、
今更ながらブラウザのデータ保管機能 Cookie, SessionStorage, LocalStorage, IndexedDB を比較しながら解説してます！

間違いあれば、コメントで教えてください！

■ 比較表（ざっくり）

Cookie SessionStorage LocalStorage IndexedDB
データの生存期間 セッションの終了まで（※ただし期限の指定も可能） タブ/ウィンドウが開いている間 手動で消去するまで 手動で消去するまで
データ保存可能容量 約4KB 5MB程（ブラウザにより異なる） 5MB程（ブラウザにより異なる） ブラウザによる制限なし（ディスク容量に基づく）
データアクセス可能領域 サーバー＆クライアント クライアントのみ クライアントのみ クライアントのみ
データ形式 文字列のみ 任意のデータ形式（主に文字列） 任意のデータ形式（主に文字列） 任意のデータ形式（構造化されたデータも含む）
通信 HTTPリクエストごとに送信 送信しない 送信しない 送信しない
主な利用用途 セッション管理、個別ユーザーの追跡 ページ間で一時的なデータの共有 長期間保持すべきデータの保存 大量かつ複雑なデータの長期保存、オフライン対応アプリケーション

■ Cookie

HTTPを介してサーバーとクライアント間で少量のデータを共有するための機能のことです。
WebサイトはCookieを利用してユーザーを識別し、その設定を保存します。

◎データの生存期間

セッションクッキーと永続クッキーの2種類が存在します。

セッションクッキー

セッションクッキーはブラウザが閉じられると自動的に削除され、主にユーザーがログイン状態を維持するためなどに使用されます。

永続クッキー

永続クッキーは設定した期間が経過するまでブラウザに保存され、その期間は数日から数年まで様々。
永続クッキーは、ユーザーのサイト訪問の頻度、利用状況の追跡、サイトのカスタマイズ（例えば、テーマの設定やユーザー設定の保存）などに使用されます。

◎データ容量

１つのCookieにつき約4KBしか保存できない

◎データのアクセス可能領域

サーバーサイドとクライアントサイドの両方からアクセス可能

◎データの保存形式

文字列形式でデータを保存

◎主な利用用途

セッション管理、ユーザーの個人設定の保存、閲覧行動の追跡などで利用される。

利用されているサービス具体例： Amazon

ログイン状態やショッピングカートの内容を保存するためにCookieを使用しているようです。
これにより、ユーザーがページを移動、ブラウザを閉じて後で再度開いたときでも、自分が選んだ商品がショッピングカートに残っていることが保証されている。

■ SessionStorage

一時的なデータ保存用途に適したWeb Storage APIの一部。
ブラウザタブやウィンドウが閉じられると自動的に削除される。リロード時は生き残ります。

◎データの生存期間

ブラウザセッション中のみ生存します。ブラウザを閉じるとデータは削除される。
リロード時は保持されます。

◎データ容量

一般的に5MBから10MBのデータを保存できる（ブラウザにより異なる）

◎データのアクセス可能領域

クライアントサイド（JavaScript）からのみアクセス可能

◎データの保存形式

文字列形式でデータを保存する

◎主な利用用途

一時的な情報の保存、例えばフォームの入力途中の状態や、ショッピングカートの中身など

利用されているサービス具体例： Googleマップ

一つのタブで特定の場所を検索し、別のタブで別の場所を検索した場合、それぞれの検索結果はタブ間で混在しません。
この挙動はユーザーが複数のタブでGoogleマップを開いた場合、それぞれのタブはそれぞれのセッションデータを持つためです。

これは、SessionStorageが各タブやウィンドウに対して独立してデータを保存する仕様により実現されています。

■ LocalStorage

永続的なデータ保存用途に適したWeb Storage APIの一部です。手動で削除するまで永続的に保存されます。

◎データの生存期間

手動で削除するまで永続的に保存される

手動で削除
  • アプリケーション側で何かしらのトリガーで削除されるようにプログラムした場合
  • ユーザーがブラウザのキャッシュを削除したり、devtools などで削除した場合

◎データ容量

一般的に5MBから10MBのデータを保存できる（ブラウザにより異なる）

◎データのアクセス可能領域

クライアントサイド（JavaScript）からのみアクセス可能

◎データの保存形式

文字列形式でデータを保存

◎主な利用用途

ブラウザを閉じてもデータが残るため、永続的なデータの保存に適しています。

利用されているサービス具体例： Twitter

Twitterでは、ダークモードやライトモードといったユーザーのインターフェース設定をLocalStorageに保存しているようです。
これにより、ユーザーがTwitterを再訪したときに、前回選んだ設定が引き継がれるようになっている。

■ IndexedDB

ブラウザ内に構造化されたデータを保存するための高度なWeb API。
複雑なデータ型を扱い、トランザクションもサポートします。
データの読み書きは非同期的（ノンブロッキング）に行われ、大量のデータを扱う際でもUIのパフォーマンスを維持できるようです。

◎データの生存期間

手動で削除するまで永続的に保存される

手動で削除
  • アプリケーション側で何かしらのトリガーで削除されるようにプログラムした場合
  • ユーザーがブラウザのキャッシュを削除したり、devtools などで削除した場合

◎データ容量

ブラウザによりますが、一般的に数十から数百MBのデータを保存可能

◎データのアクセス可能領域

クライアントサイド（JavaScript）からのみアクセス可能

◎データの保存形式

複雑なデータ型（文字列、数値、日付、配列、オブジェクトなど）を保存可能

◎主な利用用途

オフライン対応のWebアプリケーション、大量のデータをローカルにキャッシュする用途など。

利用されているサービス具体例： Googleドキュメント

Googleドキュメントは、ユーザーがオフラインでも作業を続けられるよう、作業中のドキュメントをIndexedDBに保存しているようです。
これにより、ユーザーが一時的にオフラインになっても作業の進行が失われることはありません。
そして再びオンラインになったときに、オフライン中に作業した内容が自動的にクラウドに同期されています。

■ 扱う上での注意点、考慮すべき点

◎ セキュアな情報を保存しない

Cookie, SessionStorage, LocalStorage, IndexedDBにパスワードや個人情報などの敏感なデータを直接保存することは避けるべきです。
基本的にデータをブラウザ内に保存するため、ユーザー自身やそのブラウザを操作する他のウェブサイトからアクセスが可能なためです。

懸念されるセキュリティリスク

下記、セキュリティリスクがあるようです。

※そこまで調べられていないかつ、冗長になるため詳細の説明は省きます

◎ 保存可能容量に制限がある

一般的には、Cookieは約4KB、SessionStorageとLocalStorageは5MBから10MB、IndexedDBは数十から数百MBを保存できます。
ただ、ブラウザやユーザーの設定により、これらの制限は変動する可能性があるため注意が必要です。

◎ データの持続性の考慮

Cookie, SessionStorage, LocalStorage, IndexedDBそれぞれにデータが削除されるトリガーの考慮が必要です。

また、LocalStorageとIndexedDBに保存したデータは、ユーザーが手動で削除しない限り永続的に存在します。
一方で、ユーザーがデータを予期せず削除したり、ブラウザのデータ消去機能を使った場合にデータが失われる可能性もあります。

■ さいごに

最後までお読みいただきありがとうございました！

今回紹介したもののなかでは、LocalStorageしか利用してきませんでした。
今後はセキュリティリスクや、データの容量、データ生存期間を考慮した上で最適なものを選んで実装していきたいです。

参考にさせていただいたもの

Discussion