チェックボックスで表示テキストを切り替える仕組み（localStorage対応）

※当サイトではアフィリエイト広告を利用しています

Webページ上のテキスト表示を、チェックボックスのオン・オフに応じて切り替える機能を実装したいときに使える、汎用的なJavaScriptの例を紹介します。

たとえば以下のようなケースに使えます：

  • スイッチで「通常表示」と「ローカル言語表示」を切り替えたい
  • 表示を切り替えても、リロード後に状態を保持したい

想定するHTML構造

以下のように、切り替え対象のテキストを <span> 要素で囲み、それぞれに data-local 属性で別の値を持たせておきます。

<input type="checkbox" id="toggleSwitch"> 表示を切り替える

<table>
  <tr class="td_grade">
    <td><span data-local="Local A">Original A</span></td>
    <td><span data-local="Local B">Original B</span></td>
    <td><span data-local="ローカルC">オリジナルC</span></td>
  </tr>
</table>
  • <input> はチェックボックス（トグルスイッチ）です
  • data-local に切り替えたいテキストを指定します
  • .td_grade span の要素を対象にスクリプトが動きます

JavaScriptコード

document.addEventListener('DOMContentLoaded', function () {
  const toggleSwitch = document.getElementById('toggleSwitch');

  // スイッチが存在しなければ処理を中断
  if (!toggleSwitch) {
    console.warn('toggleSwitch の要素が見つかりませんでした。');
    return;
  }

  // localStorage から前回の状態を読み込み、安全に代入
  let textReplaceEnabled = false;
  try {
    textReplaceEnabled = localStorage.getItem('textReplaceEnabled') === 'true';
  } catch (error) {
    console.error('localStorage の読み込みに失敗しました:', error);
  }

  toggleSwitch.checked = textReplaceEnabled;

  // 元のテキストを保存しておくための辞書
  const originalTexts = {};
  document.querySelectorAll('.td_grade span').forEach(function (element, index) {
    originalTexts[index] = element.innerText;
  });

  // 表示を更新する関数
  function updateText() {
    document.querySelectorAll('.td_grade span').forEach(function (element, index) {
      if (toggleSwitch.checked) {
        const localValue = element.getAttribute('data-local');
        if (localValue) {
          element.innerText = localValue;
        }
      } else {
        element.innerText = originalTexts[index];
      }
    });
  }

  // 初期状態に合わせて表示更新
  updateText();

  // チェックボックスの切り替え時に保存＆更新
  toggleSwitch.addEventListener('change', function () {
    try {
      localStorage.setItem('textReplaceEnabled', toggleSwitch.checked);
    } catch (error) {
      console.error('localStorage の保存に失敗しました:', error);
    }
    updateText();
  });
});

実装のポイント

  • localStorage を使って状態を保存：ページをリロードしても、直前のスイッチ状態を復元します。
  • 安全性を考慮した記述：toggleSwitch が見つからない場合や、localStorage にアクセスできない場合でもエラーにならないよう設計しています。
  • セレクタを汎用化：.td_grade span を変えることで、他のテーブルや要素にも応用できます。

コメント