読み込み中...

JavaScriptのlocalStorageを活用する10の方法

JavaScriptのlocalStorageを活用する10の方法とサンプルコード JS
2023.05.05
この記事は約13分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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を使用する際には、いくつかの注意点があります。

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

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

●カスタマイズ方法

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

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

まとめ

この記事では、JavaScriptのlocalStorageについて説明し、基本的な使い方や応用例を紹介しました。

また、注意点と対処法、カスタマイズ方法についても触れました。

localStorageは、簡単にデータを保存し、Webアプリケーションの機能を向上させることができますが、その利用には注意が必要です。

セキュリティやブラウザの互換性を考慮して、適切な方法でデータを管理しましょう。