当使用后退按钮时，更新的值保留在输入字段中，但代码在窗口中.Onload使用默认的HTML值

Question

我有一个带有html默认值的输入框。使用window.onload函数，我添加了一个事件侦听器，将框中的值输出到控制台日志，并且还在窗口中调用上述事件。onload函数。

正如我所期望的那样，当我打开页面时，它运行代码一次并输出输入默认值。我可以编辑这个值，点击按钮，更新后的值也会被记录到控制台。

但是，如果我点击链接到另一个页面，然后使用返回按钮返回原始页面，则更新后的文本仍保留在输入框中，但控制台日志输出默认的html值。自己再次点击按钮，输出输入中显示的更新值。

我怎样才能使它，当我回去，在输入框中显示的更新值也记录到控制台，(这样当回去时，它运行相同的代码，我离开)?

// Otherwise ran by window.onload = () => {...}
const text = document.getElementById('text');
const button = document.getElementById('button');
button.addEventListener('click', () => console.log(text.value));
button.click();

<input id="text" value="text" />
<input id="button" type="button" value="Click" /><br>
<a href="https://stackoverflow.com/">https://stackoverflow.com/</a>

Answer 1

我不完全确定，但我认为这些值是由浏览器在完全同步加载DOM后立即预填充的。你可以通过在setTimeout 0中调用你的代码来等待它完成。

setTimeout(function () {
const text = document.getElementById('text');
const button = document.getElementById('button');
button.addEventListener('click', () => console.log(text.value));
button.click();
}, 0)