コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > LocalStorage > きちんと使い分けてる？LocalStorage・SessionStorage・Cookiesのベストプラクティス

きちんと使い分けてる？LocalStorage・SessionStorage・Cookiesのベストプラクティス

LocalStorage SessionStorage Cookie

LocalStorage vs SessionStorage vs Cookies: Understanding the Differences and Use Cases

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

Web開発者は、LocalStorage、SessionStorage、Cookieを使用する必要がある状況に頻繁に遭遇します。課題は、その違いを理解し、特定の要件に適したものを選択することです。

LocalStorage

LocalStorageは、Webブラウザのプロパティで、JavaScriptサイトおよびアプリが有効期限のないkey-valueペアを保存できるようにします。ユーザーがブラウザを閉じたり、コンピュータを再起動しても、保存されたデータは維持されます。必要に応じてデータの追加、更新、削除が可能です。

各オリジン（プロトコル + ドメイン + ポート）は、データ分離を保証する独自のLocalStorageを持っています。

LocalStorageの保存場所

LocalStorageデータは、ブラウザの内部ファイル内のユーザーのデバイスに保存されます。正確な保存メカニズムと場所は使用しているブラウザに依存しますが、通常、LocalStorageはバックエンドでSQLiteデータベースを使用しています。

基本的な使用方法

// LocalStorageにデータを保存
localStorage.setItem("key", "value");

// LocalStorageからデータを取得
let data = localStorage.getItem("key");

// LocalStorageから特定の項目を削除
localStorage.removeItem("key");

// LocalStorageのすべてのデータを消去
localStorage.clear();

使用例

例えば、ウェブサイトでユーザーがライトモードとダークモードを切り替えられる場合、ユーザーが毎回モードを選択する必要がないように、ユーザーの環境設定をLocalStorageに保存できます。

SessionStorage

SessionStorageはLocalStorageに似ていますが、ページセッションの間のみデータを保持する点が異なります。

各ブラウザタブは独自のセッションストレージを取得します。データはタブまたはブラウザが閉じられると消去されますが、ページのリロードや復元には耐えられます。

SessionStorageの保存場所

SessionStorageは、各ブラウザタブまたはウィンドウ専用に割り当てられたブラウザのメモリに一時的に保存されます。その保存メカニズムと場所は、ページセッション中の短期使用のために設計されています。

基本的な使用方法

// SessionStorageにデータを保存
sessionStorage.setItem("key", "value");

// SessionStorageからデータを取得
let data = sessionStorage.getItem("key");

// SessionStorageから特定の項目を削除
sessionStorage.removeItem("key");

// SessionStorageのすべてのデータを消去
sessionStorage.clear();

使用例

複数ステップのフォームで、ユーザーがステップ間を移動してもフォーム入力を失わないようにするのに理想的です。

Cookies

CookieはWebサーバーの要求によりブラウザがユーザーのデバイスに保存する小さなテキストファイルです。ウェブサイトはユーザーのアクティビティ、設定、セッションに関する情報を保存および取得できます。

Cookieは指定された時間後に期限切れになるように設定したり、明示的に削除されるまで保持したりできます。LocalStorageとSessionStorageとは異なり、CookieはすべてのHTTPリクエストと共に送信されるため、サーバーサイドの操作に有用です。

Cookiesの保存場所

Cookieは主に2つの場所に保存されます：

  1. クライアント側（ブラウザ）：Cookieは、ブラウザに関連する特定のフォルダ内の小さなテキストファイルとして保存されます。
  2. サーバー側：CookieはHTTPリクエスト中にサーバーに送信されます。サーバーは、Set-Cookie HTTPヘッダーを通じてCookieを記録、処理、または設定できます。

基本的な使用方法

// Cookieの設定
document.cookie = "key=value; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// すべてのCookieの取得
console.log(document.cookie);

// Cookieの削除
document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

使用例

サーバーサイドアプリケーションでは、セッションID、ユーザー設定、認証トークンの保存によく使用されます。例えば、ウェブサイトは、ユーザーの訪問間でログイン状態を記憶するためにCookieを使用できます。

ベストプラクティス

  • LocalStorageやSessionStorageには機密データ（パスワードなど）を保存しないでください。これらはJavaScriptからアクセス可能で、XSS攻撃に対して脆弱です。
  • 機密情報にはHttpOnlyおよびSecureフラグ付きCookieを使用し、クライアント側からのアクセスを防ぎ、安全な送信を確保してください。
  • どのストレージメカニズムからデータを取得する際も、インジェクション攻撃を防ぐために、必ずデータのサニタイズと検証を行ってください。

LocalStorage、SessionStorage、Cookieの違いを理解することで、パフォーマンスの向上、ユーザーエクスペリエンスの向上、アプリケーションセキュリティの維持に貢献できます。

©コハム