【理解】localstorageとCookieを正しく使い分ける方法

投稿日:2023/06/10 最終更新日:2023/06/10

【理解】localstorageとCookieを正しく使い分ける方法

ウェブアプリケーションでクライアントサイドでのデータ保存が必要な場合、localStorageとCookieは一般的に使用されるメカニズムです。

この記事では、localStorageとCookieの基本的な使い方と、両者の違いについて詳しく説明します。

使い方と特徴

localStorage

localStorageは、ウェブブラウザにデータを永続的に保存するためのAPIです。

以下のように使用します。

// データの保存
localStorage.setItem('key', 'value');

// データの取得
const value = localStorage.getItem('key');

// データの削除
localStorage.removeItem('key');

localStorageの特徴は次のとおりです。

  • データはドメインごとに保存され、他のドメインからはアクセスできません。
  • データはセッション間やブラウザの再起動後も永続的に保存されます。
  • 文字列としてのみデータを保存できます。

Cookie

Cookieは、ウェブブラウザにデータを保存するためのメカニズムです。

以下のように使用します。

// Cookieの保存
document.cookie = 'key=value; expires=weekday, day month year 00:00:00 GMT; path=/';

// Cookieの取得
const cookies = document.cookie;

Cookieの特徴は次のとおりです。

  • ドメインやパスによってアクセス範囲を制御できます。
  • 有効期限を指定することで、一時的なデータとしても使用できます。
  • 文字列形式でデータを保存しますが、必要に応じてエンコードやデコードが必要です。

メリット・デメリット

データの容量

localStorageは通常、5MBから10MBの容量を持ちますが、Cookie4KBまでの制限があります。

そのため、大量のデータを保存する場合はlocalStorageが適しています

サーバへの送信

Cookieはリクエストごとにサーバに自動的に送信されますが、localStorageは明示的な操作がない限りサーバに送信されません。

このため、サーバへの送信を行うCookieを使用する場合はセキュリティ上の注意が必要です。

サポートされるデータ形式

localStorage文字列形式のデータのみをサポートしますが、Cookie文字列以外のデータ(例: JSON)も保存できます。

使い分けの例

localStorageの使用例

  • ユーザの設定や状態を保存する
  • キャッシュデータの保存

Cookieの使用例

  • ユーザのログイン情報の保存
  • ショッピングカートの情報の保存

まとめ

localStorageとCookieは、クライアントサイドでのデータ保存に使用されるメカニズムです。

localStorageはドメインごとにデータを永続的に保存し、大容量のデータを扱う場合に適しています。

一方、Cookieはドメインや有効期限を制御できるが、データ容量に制限があります。

違いをしっかりと理解した上で適切な使用例に応じて、どちらのメカニズムを選択するかを検討してください。

参考資料

MDN web docs: Web Storage API

MDN web docs: Document.cookie