ページを移動しても選択状態を記憶するセレクトボックスの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動しても選択状態を記憶するセレクトボックスの作り方

ページを移動しても選択状態を記憶するセレクトボックスの作り方を紹介します。このサンプルでは、セレクトボックスで選択した項目をブラウザのlocalStorageへ保存します。通常はページを再読み込みしたり、別のページへ移動してから戻ったりすると選択内容が初期状態へ戻ることがありますが、localStorageを利用することで、最後に選択した項目を保存して再表示できます。

都道府県、カテゴリー、表示設定、検索条件など、利用者が一度選択した内容を次回も同じ状態で表示したい場面に利用できます。セレクトボックスの選択内容が変更されるたびにJavaScriptで値をlocalStorageへ保存し、ページを表示したときに保存されている値を読み込んで選択状態を復元します。そのため、ページを移動してから戻った場合やページを再読み込みした場合でも、最後に選択した項目をそのまま表示できます。

localStorageには保存期限が設定されていないため、時間が経過しただけで保存した選択状態が自動的に削除されることはありません。基本的には、利用者がブラウザのサイトデータを削除するか、JavaScriptで保存データを削除するまで状態が残ります。ただし、ブラウザの設定や利用環境によって保存データが削除される場合があります。HTMLではラベルや選択肢を変更でき、CSSでは横幅、余白、背景色、枠線、角丸などを調整できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

選択状態を記憶するセレクトボックス

選択した都道府県をlocalStorageへ保存します。

都道府県

項目を選択したあとにページを再読み込みしても、最後に選択した項目が表示されます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>ページを移動しても選択状態を記憶するセレクトボックス</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- セレクトボックス全体 -->
  <div class="remember-select-box_demo">

    <!-- タイトル -->
    <div class="remember-select-box_demo_title">
      選択状態を記憶するセレクトボックス
    </div>

    <!-- 説明文 -->
    <p class="remember-select-box_demo_text">
      選択した都道府県をlocalStorageへ保存します。
    </p>

    <!-- ラベル -->
    <label class="remember-select-box_demo_label" for="remember-prefecture">
      都道府県
    </label>

    <!-- セレクトボックス配置エリア -->
    <div class="remember-select-box_demo_select_wrap">

      <!-- セレクトボックス -->
      <select class="remember-select-box_demo_select" id="remember-prefecture">

        <option value="">選択してください</option>
        <option value="hokkaido">北海道</option>
        <option value="tokyo">東京都</option>
        <option value="osaka">大阪府</option>
        <option value="fukuoka">福岡県</option>

      </select>

    </div>

    <!-- 補足説明 -->
    <p class="remember-select-box_demo_note">
      項目を選択したあとにページを再読み込みしても、最後に選択した項目が表示されます。
    </p>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* セレクトボックス全体 */
.remember-select-box_demo{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:680px; /* 最大横幅。値を大きくすると横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:36px; /* 内側余白。値を大きくすると余白が広がる */
  border:1px solid #dbe5f1; /* 全体の枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.remember-select-box_demo_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  text-align:center; /* タイトルを中央揃え */
  font-size:30px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  color:#111827; /* タイトルの文字色 */
}

/* 説明文 */
.remember-select-box_demo_text{
  margin:0 0 28px; /* 下側28pxの余白 */
  text-align:center; /* 説明文を中央揃え */
  color:#64748b; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* ラベル */
.remember-select-box_demo_label{
  display:block; /* ラベルをブロック要素として表示 */
  margin-bottom:10px; /* セレクトボックスとの間隔 */
  font-size:16px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
  color:#111827; /* ラベルの文字色 */
}

/* セレクトボックス配置エリア */
.remember-select-box_demo_select_wrap{
  position:relative; /* 矢印の配置基準にする */
  width:100%; /* 横幅いっぱいに表示 */
}

/* セレクトボックス */
.remember-select-box_demo_select{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:16px 52px 16px 16px; /* 上下16px・右52px・左16pxの内側余白 */
  border:2px solid #dbe5f1; /* セレクトボックスの枠線 */
  border-radius:12px; /* セレクトボックスの角丸 */
  background:#ffffff; /* セレクトボックスの背景色 */
  color:#111827; /* 選択文字の色 */
  font-size:16px; /* 文字サイズ */
  line-height:1.5; /* 行間 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
  appearance:none; /* ブラウザ標準の矢印を非表示 */
  -webkit-appearance:none; /* Safari用の標準矢印を非表示 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* セレクトボックス右側の矢印 */
.remember-select-box_demo_select_wrap::after{
  content:""; /* 疑似要素を生成 */
  position:absolute; /* 配置エリアを基準に配置 */
  top:50%; /* 上下中央へ配置 */
  right:20px; /* 右側から20pxの位置 */
  width:10px; /* 矢印の横幅 */
  height:10px; /* 矢印の高さ */
  border-right:2px solid #111827; /* 矢印右側の線 */
  border-bottom:2px solid #111827; /* 矢印下側の線 */
  transform:translateY(-70%) rotate(45deg); /* 下向き矢印へ調整 */
  pointer-events:none; /* クリック操作を邪魔しない */
}

/* フォーカス時 */
.remember-select-box_demo_select:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  outline:3px solid rgba(37,99,235,0.18); /* 外側の強調表示 */
}

/* 補足説明 */
.remember-select-box_demo_note{
  margin:24px 0 0; /* 上側24pxの余白 */
  text-align:center; /* 中央揃え */
  color:#64748b; /* 文字色 */
  line-height:1.8; /* 行間 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* スマートフォン用の全体 */
  .remember-select-box_demo{
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* スマートフォン用のタイトル */
  .remember-select-box_demo_title{
    font-size:24px; /* タイトルを小さくする */
  }

  /* スマートフォン用のセレクトボックス */
  .remember-select-box_demo_select{
    padding:14px 50px 14px 14px; /* 内側余白を縮小 */
  }

  /* スマートフォン用の矢印 */
  .remember-select-box_demo_select_wrap::after{
    right:18px; /* 右側位置を調整 */
  }

}

// セレクトボックスを取得
const rememberSelectBox=document.getElementById(
  "remember-prefecture"
);

// localStorageへ保存するキーを設定
const rememberSelectBoxKey="rememberSelectBoxPrefecture";

// localStorageから保存済みの選択値を取得
const savedSelectValue=localStorage.getItem(
  rememberSelectBoxKey
);

// 保存済みの値がある場合
if(savedSelectValue !== null){

  // 保存されている項目を選択状態へ戻す
  rememberSelectBox.value=savedSelectValue;

}

// セレクトボックスの選択内容が変更された時
rememberSelectBox.addEventListener("change",function(){

  // 現在選択されている値をlocalStorageへ保存
  localStorage.setItem(
    rememberSelectBoxKey,
    rememberSelectBox.value
  );

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではセレクトボックスのタイトル、説明文、ラベル、選択肢を作成します。CSSではセレクトボックス全体の横幅や余白、枠線、角丸、矢印、フォーカス時の表示などを設定します。JavaScriptでは選択された値をlocalStorageへ保存し、ページを再読み込みした場合や別のページへ移動してから戻った場合に、最後に選択していた項目を復元します。

sample/
    ├── index.html
    ├── style.css
    └── script.js

各ファイルの役割
index.htmlはセレクトボックス全体を構成するファイルです。「選択状態を記憶するセレクトボックス」のタイトル、説明文、「都道府県」のラベル、「北海道」「東京都」「大阪府」「福岡県」などの選択肢を変更できます。各option要素のvalue属性には、localStorageへ保存する値を設定しています。

style.cssはセレクトボックス全体のデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、タイトルやラベルの文字サイズ、セレクトボックスの高さや内側余白、フォーカス時の枠線色、右側の矢印などを変更できます。

script.jsはセレクトボックスの選択状態を保存・復元するファイルです。選択内容が変更されると現在のvalueをlocalStorageへ保存します。ページ表示時にはlocalStorageから保存済みの値を取得し、その値をセレクトボックスへ設定して最後に選択していた項目を復元します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。セレクトボックスから都道府県を選択すると、その選択値がブラウザのlocalStorageへ保存されます。選択後にページを再読み込みしたり、別のページへ移動してから戻ったりすると、最後に選択していた項目が再び選択された状態で表示されます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、選択肢の表示文字とvalue属性を変更できます。都道府県以外にも、カテゴリー、表示設定、検索条件などの選択項目へ変更できます。選択肢を追加する場合は、既存のoption要素と同じ形式で追加し、それぞれ異なるvalueを設定してください。

style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、タイトルやラベルの文字サイズ、セレクトボックスの内側余白、フォーカス時の色、右側の矢印の位置や大きさなどを変更できます。JavaScriptではrememberSelectBoxPrefectureを変更することで、localStorageへ保存するキー名を変更できます。

数値調整
style.css
max-width:680px;
セレクトボックス全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
セレクトボックス全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:36px;
セレクトボックス全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。

border-radius:18px;
セレクトボックス全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:30px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。

margin:0 0 28px;
説明文の下側余白です。28pxを大きくするとラベルとの間隔が広がり、小さくすると狭くなります。

margin-bottom:10px;
ラベルとセレクトボックスの間隔です。値を大きくすると間隔が広がり、小さくすると近づきます。

padding:16px 52px 16px 16px;
セレクトボックスの内側余白です。上下16px、右52px、左16pxを設定しています。右側は矢印を表示するため広めの余白を確保しています。

border:2px solid #dbe5f1;
セレクトボックスの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:12px;
セレクトボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

right:20px;
セレクトボックス右側に表示する矢印の位置です。値を大きくすると左方向へ移動し、小さくすると右端へ近づきます。

width:10px;
矢印の横幅です。値を大きくすると矢印が大きくなります。

height:10px;
矢印の高さです。横幅と同じ値にすることでバランスの取れた矢印になります。

outline:3px solid rgba(37,99,235,0.18);
セレクトボックスへフォーカスしたときの外側の強調表示です。3pxを大きくすると強調範囲が広がり、小さくすると控えめになります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:680pxにより、セレクトボックス全体が画面幅に合わせて縮小されます。また、640px以下では全体の内側余白をpadding:24px 18px;へ変更し、タイトルをfont-size:24px;へ縮小しています。セレクトボックスの内側余白と矢印の位置も調整しているため、スマートフォン・タブレット・PCで利用できます。