如何在自动页面重新加载时保存选择中的值

Question

我有JS代码，在页面重新加载时存储一个选择值。这段代码工作得很好，但是它附加在提交按钮上。

我的代码:

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()"

我想让页面自动重新加载，仍然保持值在选择。

Answer 1

尝试使用beforeunload事件侦听器代替提交函数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);
});