【Javascript】セレクトボックスの選択をブラウザ更新後も記憶する

ブラウザ更新後もセレクトボックス等で選択しているものを記憶し、再びセレクトボックスに反映しなおすための備忘録です（大した内容ではありません）。

そもそもAjaxなどで更新させない方法が良いと思いますが、更新させる必要がある場合やAjaxを導入するほどでもない時に役立てば幸いです。

初心者目線でAjaxの説明 - Qiita

コード量を短くするため今回はjQueryで書いてますが、使わなくてもそんなに変わりません。

【初心者向け】jQueryとは｜メリット・デメリットから記述方法まで解説

（追記）localStorage使った方がよさそう。

JavaScriptでlocalStorageを使った話 | blog del Teorico

コード

HTML

<select class="SelectBox">
    <option value="Default">Default</option>
    <option value="A">A</option>
    <option value="B">B</option>
</select>

javascript

<script type="text/javascript">
$(function(){
     const url = new URL(window.location.href);
     const cat = url.searchParams.get('cat');
     // ③
     if(url.searchParams.get('cat')){
     // ④
       $(".SelectBox").val(cat);
     }else{
       url.searchParams.append('cat','Default');
       location.href = url;
 }

 $(".SelectBox").change(function(){
     // ①
     const selected = $(this).val();
     // ②
     if(url.searchParams.get('cat')) {
       url.searchParams.set('cat',selected);
     }else{
       url.searchParams.append('cat',selected);
     }
     location.href = url;
	});
});
</script>

仕組み

①セレクトボックス変更時、選択されたオプションのvalueを取得。
②取得したvalueをURLのGETメソッドでパラメータに付与（既にパラメータが付いていれば変更、なければ追加）。その後ページ読み込み直し。
③ページを読み込んだ際にURLパラメータを取得。なければ初期値をつけて読み込み直し。
④値をセレクトボックスのvalueへ戻す。

GETメソッドとPOSTメソッドの違いとSEO面からの使い分け

使用するプロパティ

window.location.href：URLを取得
location.href：URL移動

JavaScript Window Location

searchParams：パラメータ管理

URL.searchParams - Web APIs | MDN

以上、お役に立てば幸いです。