如何在自動頁面重新加載時保留 select 中的值

Question

我有 JS 代碼在頁面重新加載時將值存儲在 select 中。 此代碼運行良好，但它附加到提交按鈕。

我的代碼：

 document.addEventListener('DOMContentLoaded', function() { var item = localStorage.getItem('test'); var select = document.getElementById("test"); select.value = item; }); function submitForm() { var select = document.getElementById("test"); var value = select.options[select.selectedIndex].value; localStorage.setItem('test', value); }

 <form method="POST" onsubmit="submitForm()"> <select class="form-select" name="test" id="test"> <option>Select value</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit"> </form>

如何更改此代碼，以便通過將此代碼粘貼到表單中，當值更改時自動發生時，它還可以在重新加載過程中保持值：

onchange="this.form.submit()"

我希望頁面自動重新加載，並且仍然保留 select 中的值。

Answer 1

嘗試使用beforeunload事件偵聽器而不是提交 function https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

document.addEventListener('beforeunload', function() {
    var select = document.getElementById("test");
  var value = select.options[select.selectedIndex].value;
  localStorage.setItem('test', value);
});