2. JavaScript

JavaScriptでローカルストレージを使う方法を解説

Share

Webアプリケーションを作っていると、ちょっとしたデータを保存して再利用したくなる場面がありますよね。

たとえば、ユーザーの設定や一時的なメモなどです。

このような用途に便利なのが ローカルストレージ（LocalStorage） です。

この記事では、JavaScriptを使ってローカルストレージにデータを保存・取得・削除する基本的な方法を解説します。

ローカルストレージとは？

ローカルストレージは、ブラウザにデータを保存できる仕組みのひとつで、永続的にデータを保持します。つまり、ブラウザを閉じても保存されたデータは消えません。

以下のような特徴があります：

  • データは文字列（String）で保存される
  • ブラウザごとに最大5MB程度保存できる
  • クッキーと違って自動的に送信されない
  • 同一オリジン（ドメイン＋ポート）内で共有

基本的な使い方

データの保存

localStorage.setItem('username', 'JohnDoe');

データの取得

const name = localStorage.getItem('username');
console.log(name); // JohnDoe

データの削除

localStorage.removeItem('username');

すべてのデータを削除

localStorage.clear();

オブジェクトや配列を保存するには？

ローカルストレージは文字列のみを保存できるため、JSON.stringify() と JSON.parse() を使ってオブジェクトや配列を扱います。

const user = { id: 1, name: 'John' };
localStorage.setItem('user', JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // John

実用例：テーマの設定を保存する

// テーマの保存
function setTheme(theme) {
  document.body.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}

// ページ読み込み時にテーマを復元
document.addEventListener('DOMContentLoaded', () => {
  const theme = localStorage.getItem('theme');
  if (theme) {
    setTheme(theme);
  }
});

以下は、「セッションストレージ」や「クッキー」との違いを解説する追記部分です。先ほどの記事に補足として追加する形でご活用ください。

ローカルストレージ・セッションストレージ・クッキーの違い

Webブラウザにデータを保存する方法として、ローカルストレージ以外にもセッションストレージやクッキーがあります。それぞれの特徴を比較してみましょう。

ローカルストレージ（localStorage）

  • 保存期間：永続的（明示的に削除しない限り残る）
  • 容量制限：おおよそ5MB
  • 送信タイミング：サーバーへは送信されない
  • 用途：テーマ設定、入力内容の保持などクライアント側限定の情報保存

セッションストレージ（sessionStorage）

  • 保存期間：タブを閉じるまで（リロードでは消えない）
  • 容量制限：おおよそ5MB（ブラウザにより異なる）
  • 送信タイミング：サーバーへは送信されない
  • 用途：フォーム入力の一時保存、ページ遷移中の状態保持など
sessionStorage.setItem('draft', '入力中の内容');

クッキー（document.cookie）

  • 保存期間：設定された有効期限まで（もしくはブラウザ終了まで）
  • 容量制限：1ドメインあたり約4KB
  • 送信タイミング：毎回HTTPリクエストに自動的に付与されて送信される
  • 用途：ログイン情報、トラッキング、サーバー側とのデータ共有が必要な場合
document.cookie = "token=abcdef; expires=Fri, 01 Jan 2027 00:00:00 UTC; path=/";

どれを使うべき？

目的適した手段
一時的な情報（タブ単位）sessionStorage
永続的な情報（端末保存）localStorage
サーバーにも送る必要のある情報cookie

それぞれの用途に応じて使い分けることが、セキュリティやパフォーマンスの観点でも重要です。

注意点

ローカルストレージを使う際は以下の点に注意してください。

  • 容量制限に注意（およそ5MB）
  • すべてのブラウザが対応しているわけではない（古いIEなど）
  • セキュリティ上の配慮が必要（特に公開されるデータに機密を含めないこと）

まとめ

ローカルストレージは、小さなデータの保存に非常に便利な手段です。文字列ベースではありますが、JSON.stringify() や JSON.parse() を活用することで、柔軟に活用できます。

JavaScriptでちょっとしたデータを残しておきたい場面では、ぜひローカルストレージを活用してみてください。