【JavaScript】ローカルストレージを使用してアコーディオンの状態を保存する

Web開発において、ユーザーエクスペリエンスを向上させるためには、ページの状態を記憶しておくことが重要です。今回は、JavaScriptとローカルストレージを駆使して、アコーディオンの状態を保存し、ユーザーがページをリロードしてもその状態を保持する方法を紹介します。

アコーディオンのHTMLとCSS

まず最初に、基本的なアコーディオンのHTML構造とスタイリングを行います。これはアコーディオンの基本的な見た目を定義するもので、具体的なデザインはプロジェクトに合わせて変更できます。

<!-- アコーディオンのHTMLとCSS -->
<style>
  .accordion-section {
    border: 1px solid #ddd;
    margin-bottom: 10px;
  }

  .accordion-title {
    cursor: pointer;
    padding: 10px;
    background-color: #f1f1f1;
  }

  .accordion-content {
    display: none;
    padding: 10px;
  }
</style>

<!-- アコーディオンの各セクション -->
<div class="accordion-section">
  <div class="accordion-title" onclick="toggleAccordion(1)">Section 1</div>
  <div class="accordion-content" id="section1Content"></div>
</div>

<div class="accordion-section">
  <div class="accordion-title" onclick="toggleAccordion(2)">Section 2</div>
  <div class="accordion-content" id="section2Content"></div>
</div>

JavaScriptで状態管理

次に、JavaScriptコードを導入します。このコードはアコーディオンの状態をローカルストレージに保存し、ページが読み込まれる際にその情報を取得してアコーディオンを再設定します。

<!-- JavaScriptコード -->
<script>
  // アコーディオンの開閉と状態の保存
  function toggleAccordion(sectionNumber) {
    const contentId = `section${sectionNumber}Content`;
    const content = document.getElementById(contentId);

    if (content.style.display === 'block') {
      content.style.display = 'none';
      localStorage.setItem(contentId, 'closed');
    } else {
      content.style.display = 'block';
      localStorage.setItem(contentId, 'open');
    }
  }

  // ローカルストレージからアコーディオンの状態を読み込む
  function loadAccordionState() {
    for (let i = 1; i <= 2; i++) {
      const contentId = `section${i}Content`;
      const content = document.getElementById(contentId);
      const state = localStorage.getItem(contentId);

      if (state === 'open') {
        content.style.display = 'block';
      } else {
        content.style.display = 'none';
      }
    }
  }

  // ページが読み込まれたときにアコーディオンの状態を設定
  window.onload = loadAccordionState;
</script>

これで、ユーザーがアコーディオンを開閉するとその状態がローカルストレージに保存され、ページをリロードしてもその状態が維持されます。ユーザーエクスペリエンスが向上し、使い勝手が良くなるでしょう。

まとめ

以上が、JavaScriptとローカルストレージを活用してアコーディオンの状態を保存する方法の簡単な紹介です。アプリケーションに組み込む際には、デザインや機能の拡張に合わせてカスタマイズしてください。