HTML上の複数コントロールにデータの保存機能を付与する

HTML上の複数コントロールにデータの保存機能を付与する方法。コピペで使える内容です。

const defaultValues = {
  // ...
}
window.addEventListener("load", (e) => {
  Array.from(document.getElementsByClassName("savecontrol")).forEach((e) => {   
    e.value = localStorage.getItem(e.id) ? localStorage.getItem(e.id) : (defaultValues[e.id] !== undefined ? defaultValues[e.id] : "");
    e.addEventListener("change", (e) => {
      localStorage.setItem(e.target.id, e.target.value);
    });
  });
});

このコードを書いた上で、入力情報を保存したいHTML上の要素(input, selectなど)にsavecontrolというクラスを設定しておくと、すべての要素にローカルストレージへの保存・読み込み機能を付与することができます。

また、defaultValueリストに値を指定しておくと、もしローカルストレージにデータがなかったときは、その値を使ってくれるようになります。
たとえば

const defaultValues = {
  "url": "http://example.com/",
}

としておけば、HTML上にIDが「url」のコントロールがあった場合、そのデフォルト値は「 http://example.com/ 」となります。