JavaScript localStorage活用の10選

はじめに
●JavaScriptのlocalStorageとは
- ○localStorageの基本
●localStorageの使い方
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのlocalStorageを活用する10の方法が身につくようになります。

初心者でも分かりやすく、徹底的に解説していくので、localStorageを上手に使いこなしてWebアプリケーションを豊かにしていきましょう。

●JavaScriptのlocalStorageとは

localStorageとは、Webブラウザにデータを保存できる機能のことです。

これにより、ユーザーがブラウザを閉じた後もデータが保持され、再度開いた際に同じデータを利用できます。

localStorageは、クッキーよりも容量が大きく、より安全性が高いとされています。

○localStorageの基本

localStorageは、キーと値のペアでデータを保存します。

値は文字列形式で保存されるため、オブジェクトや配列を保存する場合はJSON形式に変換する必要があります。

また、localStorageは同一オリジンポリシーに従い、他のオリジンからアクセスすることはできません。

●localStorageの使い方

○サンプルコード1：データを保存する

このコードでは、localStorageにデータを保存する方法を紹介しています。

この例では、キー「username」と値「JohnDoe」をlocalStorageに保存しています。

// データを保存する
localStorage.setItem("username", "JohnDoe");

○サンプルコード2：データを取得する

このコードでは、localStorageからデータを取得する方法を紹介しています。

この例では、キー「username」に対応する値を取得しています。

// データを取得する
const username = localStorage.getItem("username");
console.log(username); // "JohnDoe" と表示される

○サンプルコード3：データを削除する

このコードでは、localStorageからデータを削除する方法を紹介しています。

この例では、キー「username」に対応するデータを削除しています。

// データを削除する
localStorage.removeItem("username");

○サンプルコード4：ToDoリストの作成

このコードでは、localStorageを使ってToDoリストを作成する方法を紹介しています。

この例では、タスクを追加・削除し、localStorageに保存・読み込む機能を実装しています。

// タスクを追加する関数
function addTask(task) {
  // タスクをHTMLに追加する処理（省略）
  
  // タスクをlocalStorageに追加する
  const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  tasks.push(task);
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

// タスクを削除する関数
function removeTask(task) {
  // タスクをHTMLから削除する処理（省略）

  // タスクをlocalStorageから削除する
  const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  const index = tasks.indexOf(task);
  if (index !== -1) {
    tasks.splice(index, 1);
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }
}

// ページ読み込み時にタスクを表示する
window.addEventListener("DOMContentLoaded", () => {
  const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  tasks.forEach(task => {
    // タスクをHTMLに追加する処理（省略）
  });
});

○サンプルコード5：訪問回数のカウント

このコードでは、localStorageを使って訪問回数をカウントする方法を紹介しています。

この例では、ページ訪問時にカウントを増やし、表示しています。

// 訪問回数をカウントする
const visits = parseInt(localStorage.getItem("visits")) || 0;
localStorage.setItem("visits", visits + 1);

// 訪問回数を表示する
document.getElementById("visits").innerText = `訪問回数: ${visits + 1}`;

○サンプルコード6：簡単なショッピングカート

このコードでは、localStorageを使って簡単なショッピングカートを作成する方法を紹介しています。

この例では、商品をカートに追加・削除し、localStorageに保存・読み込む機能を実装しています。

// 商品をカートに追加する関数
function addToCart(item) {
  // 商品をHTMLに追加する処理（省略）

  // 商品をlocalStorageに追加する
  const cart = JSON.parse(localStorage.getItem("cart")) || [];
  cart.push(item);
  localStorage.setItem("cart", JSON.stringify(cart));
}

// 商品をカートから削除する関数
function removeFromCart(item) {
  // 商品をHTMLから削除する処理（省略）

  // 商品をlocalStorageから削除する
  const cart = JSON.parse(localStorage.getItem("cart")) || [];
  const index = cart.findIndex(cartItem => cartItem.id === item.id);
  if (index !== -1) {
    cart.splice(index, 1);
    localStorage.setItem("cart", JSON.stringify(cart));
  }
}

// ページ読み込み時にカートの商品を表示する
window.addEventListener("DOMContentLoaded", () => {
  const cart = JSON.parse(localStorage.getItem("cart")) || [];
  cart.forEach(item => {
    // 商品をHTMLに追加する処理（省略）
  });
});

○サンプルコード7：ウェブページの設定保存

このコードでは、localStorageを使ってウェブページの設定を保存する方法を紹介しています。

この例では、フォントサイズや背景色などの設定を変更し、localStorageに保存・適用する機能を実装しています。

// 設定を保存する関数
function saveSettings(fontSize, backgroundColor) {
  const settings = { fontSize, backgroundColor };
  localStorage.setItem("settings", JSON.stringify(settings));
}

// 設定を適用する関数
function applySettings() {
  const settings = JSON.parse(localStorage.getItem("settings"));
  if (settings) {
    document.documentElement.style.fontSize = settings.fontSize;
    document.documentElement.style.backgroundColor = settings.backgroundColor;
  }
}

// 設定を変更するイベントリスナー（省略）

// ページ読み込み時に設定を適用する
window.addEventListener("DOMContentLoaded", applySettings);

○サンプルコード8：ダークモード切り替え

このコードでは、localStorageを使ってダークモードの切り替えを実現する方法を紹介しています。

この例では、ダークモードを有効・無効に切り替え、localStorageに保存・適用する機能を実装しています。

// ダークモードを切り替える関数
function toggleDarkMode() {
  const darkModeEnabled = localStorage.getItem("darkMode") === "true";
  localStorage.setItem("darkMode", !darkModeEnabled);

  // ダークモードの適用・解除
  document.documentElement.classList.toggle("dark-mode", !darkModeEnabled);
}

// 切り替えボタンにイベントリスナーを追加
document.getElementById("darkModeToggle").addEventListener("click", toggleDarkMode);

// ページ読み込み時にダークモード設定を適用
window.addEventListener("DOMContentLoaded", () => {
  const darkModeEnabled = localStorage.getItem("darkMode") === "true";
  document.documentElement.classList.toggle("dark-mode", darkModeEnabled);
});

○サンプルコード9：フォーム入力データの一時保存

このコードでは、localStorageを使ってフォーム入力データの一時保存を行う方法を紹介しています。

この例では、入力データを逐一localStorageに保存し、ページ読み込み時に復元する機能を実装しています。

// 入力データを保存する関数
function saveInputData(input) {
  localStorage.setItem(input.name, input.value);
}

// 入力データを復元する関数
function restoreInputData(input) {
  input.value = localStorage.getItem(input.name) || "";
}

// 入力要素にイベントリスナーを追加
document.querySelectorAll("input[type='text'], input[type='email'], textarea").forEach(input => {
  input.addEventListener("input", () => saveInputData(input));
  restoreInputData(input);
});

○サンプルコード10：ゲームのスコア管理

このコードでは、localStorageを使ってゲームのスコア管理を行う方法を紹介しています。

この例では、スコアを更新し、localStorageに保存・表示する機能を実装しています。

// スコアを更新する関数
function updateScore(newScore) {
  const highScore = parseInt(localStorage.getItem("highScore")) || 0;
  if (newScore > highScore) {
    localStorage.setItem("highScore", newScore);
    return newScore;
  }
  return highScore;
}

// スコアを表示する関数
function displayScore() {
  const highScore = parseInt(localStorage.getItem("highScore")) || 0;
  document.getElementById("highScore").innerText = `ハイスコア: ${highScore}`;
}

// スコアの更新イベントリスナー（省略）

// ページ読み込み時にスコアを表示
window.addEventListener("DOMContentLoaded", displayScore);

●注意点と対処法

localStorageを使用する際には、いくつかの注意点があります。

ここでは、それらの注意点と対処法を説明します。

容量制限：localStorageの容量制限は、通常5MB程度です。
この制限を超えると、データの保存ができなくなります。
対処法としては、データを圧縮するか、不要なデータを削除することで容量を節約することができます。
同一オリジンポリシー：localStorageは、同一オリジンポリシーによって制限されています。
これは、異なるオリジン（プロトコル、ドメイン、ポート）のページからlocalStorageにアクセスすることができないことを意味します。
対処法としては、CORS（Cross-Origin Resource Sharing）を使用して異なるオリジン間でデータを共有することができます。
セキュリティ：localStorageは、クライアントサイドに保存されるため、セキュリティ上のリスクがあります。
機密性の高いデータはlocalStorageに保存しないように注意してください。
対処法としては、セキュアなストレージオプション（例：サーバーサイドストレージやセキュアなクッキー）を検討することができます。
ブラウザの互換性：すべてのブラウザがlocalStorageをサポートしているわけではありません。
特に古いブラウザでは、localStorageが利用できない場合があります。
対処法としては、機能検出（feature detection）を使用して、localStorageが利用可能かどうかをチェックし、代替手段を提供することができます。

●カスタマイズ方法

localStorageを利用したWebアプリケーションのカスタマイズ方法についていくつか紹介します。

データの暗号化：セキュリティ上の理由から、localStorageに保存するデータを暗号化することができます。これにより、悪意のある第三者によるデータの盗み読みを防ぐことができます。
データの有効期限設定：localStorageにはデータの有効期限が設定されていないため、自動的に削除されることはありません。有効期限を設定することで、古いデータを自動的に削除することができます。
イベントリスナーの活用：localStorageに変更があった際にイベントリスナーを使用して、特定の処理を行うことができます。例えば、データの変更を検知して、自動的に画面の内容を更新するような処理が考えられます。
データのバックアップ：データの喪失を防ぐために、定期的にlocalStorageのデータをバックアップすることができます。サーバーサイドにデータを送信して、安全に保管することが推奨されます。
カスタムライブラリの使用：localStorageの操作を簡単に行うために、カスタムライブラリを使用することができます。これにより、コードの可読性やメンテナンス性を向上させることができます。