单击浏览器的后退按钮后保留页面状态-解网

问：

我有一个带有文本输入的表单。提交表单并在 Google Chrome（桌面和移动设备）中单击浏览器的后退按钮后，我可以看到输入的值，但 HTML 文档末尾的 JavaScript 代码返回一个空值。我在Firefox（桌面和移动设备）上测试了我的代码，起初似乎没问题。虽然我可以在Firefox中得到这个值，但是在按下后退按钮后，添加到的值并没有保留。我该如何解决这个问题？bar

显然，使用 pageshow 事件可以解决问题。

我今天学到的另一件事是，使用会阻止浏览器记住输入的值。autocomplete="off"

const foo = document.getElementById("foo");
const bar = document.getElementById("bar");
foo.addEventListener("input", () => {
  bar.textContent = foo.value;
});

console.log("Input value: " + foo.value);
console.log("Just a random number: " + Math.random());

<form action="https://www.w3schools.com/action_page.php" method="post">
  <input type="text" name="foo" id="foo">
  <input type="submit" value="Submit">
</form>
<p id="bar"></p>

JavaScript 谷歌浏览器火狐浏览器铬

单击浏览器的后退按钮后保留页面状态

Preserve page's state after clicking on browser's back button

评论