ウェブサイト作成用備忘録・１３号：ローカルストレージを活用したダークモード持続設定【コピペでプレビュー】 #JavaScript

今回はJavaScriptの機能の中で、ローカルストレージを活用した簡単なダークモード設定の保存機能を作成してみました。

【コピペでプレビュー仕様】（```にhtmlを足すとコードがハイライトされる事に初めて気づきました）

<!doctype html>
<html>

<head>
  <!-- エンコードの指定 -->
  <meta charset="UTF-8">
  <meta http-equiv="content-language" content="ja">
  <!-- IEで常に標準モードで表示させる -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- viewport(レスポンシブ用) -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  <!-- jquery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- createJS -->
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <!-- js -->
  <!-- <script type="text/javascript" src="opening-canvas.js" charset="utf-8"></script> -->
</head>

<style>
  .change_style {
    transition: all .5s;
  }

  .light {
    background-color: #ffffff;
    color: #000000;
  }

  .dark {
    background-color: #000000;
    color: #ffffff;
  }
</style>

<body style="margin: 0;">
  <!-- ライト・ダークモード背景設定 -->
  <main class=""
    style="display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100vw; height: 100vh;">
    <div style="margin: 0 0 5%; width: 50%;">
      <!-- 現在のステータスを表示 -->
      <p id="status" style="margin: 0 0 5%; text-align: center;"></p>
      <!-- ライト・ダークモードを切り替え -->
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <p id="light_on"
          style="cursor: pointer; margin: 0; border: 2px solid #000000; box-sizing: border-box; padding: 5%; width: 45%; background-color: #ffffff; color: #000000; text-align: center;">
          ライトモード</p>
        <p id="dark_on"
          style="cursor: pointer; margin: 0; border: 2px solid #ffffff; box-sizing: border-box; padding: 5%; width: 45%; background-color: #000000; color: #ffffff; text-align: center;">
          ダークモード</p>
      </div>
    </div>
    <div style="margin: 0; width: 50%">
      ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    </div>
  </main>
</body>

<script>
  jQuery(document).ready(function () {
    // ページ読み込み時に発火
    $(document).ready(function () {
      // ローカルストレージから最新のステータスを取得
      const status = localStorage.getItem("light_dark");
      // ダークモードを設定しているかどうかの判定
      if (status == "dark") {
        $("#status").html("ダークモード");
        $("main").addClass("dark");
      } else {
        $("#status").html("ライトモード"),
          $("main").addClass("light")
      }
      setTimeout(function () {
        $("main").addClass("change_style");
      }, 1);
    });

    // ライトモードボタンをクリック
    $("#light_on").click(function () {
      $("main").addClass("light");
      $("main").removeClass("dark");
      $("#status").html("ライトモード");
      localStorage.setItem("light_dark", "light");
    });

    // ダークモードボタンをクリック
    $("#dark_on").click(function () {
      $("main").addClass("dark");
      $("main").removeClass("light");
      $("#status").html("ダークモード");
      localStorage.setItem("light_dark", "dark");
    });

  });
</script>

</html>

工夫したポイント

１・ページ読み込み時にlocalStorage.getItemで前回のページの状態を取得し、条件分岐によるCSSクラスの付け替えでページのCSSを復元します。

２・ライト・ダークモードボタンによってページの状態を切り替える際にCSSのtransitionでスムーズに繋ぎたいのですが、style設定に初めからtransitionを設定するとページ読み込み時に余分なアニメーションが発生する為、前回の設定を復元した後にjavascriptのsetTimeoutを使用してtransition設定用クラスを追加します。

今回はシンプルな内容なのであまり書くことが無いのですが、誰かの参考になれば幸いです。

キータに記事として投稿する為に、ひとつひとつの機能を細かく分けて投稿する事で勉強した内容の備忘録や、復習にもなっていると思います。