ウェブアプリケーションでクライアントサイドでのデータ保存が必要な場合、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の容量を持ちますが、Cookieは4KBまでの制限があります。

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

サーバへの送信

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

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

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

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

使い分けの例

localStorageの使用例

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

Cookieの使用例

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

まとめ

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

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

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

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

参考資料

MDN web docs: Web Storage API

MDN web docs: Document.cookie

関連記事:

オブジェクトとオブジェクトをマージしてコピーする方法 配列から要素をコピーする方法（slice、splice） JavaScript/TypeScriptで今日の日付を取得したいのになんかズレてるときの解決法 知っておくと良いJavaScript/TypeScriptで最後にセミコロン(;)をつける意味