表单上的 SessionStorage 具有默认值

Question

我有一个表单，它有一个默认值名称“Alex”。我的目标是通过会话存储保存对表单所做的任何更改。看起来我的存储已保存在浏览器上，但我的值没有以表单形式更新。页面刷新时，它会继续返回默认值“Alex”。我不确定如果我的值存储在浏览器上，为什么会发生这种情况。我的事件处理程序是正确的方法吗？JS 小提琴：https://jsfiddle.net/2yL7k8w5/20/document.addEventListener("change", (evt) => {  const save_name = document.getElementById("name").value;  sessionStorage.getItem("name");  sessionStorage.setItem("name", save_name);  });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="        crossorigin="anonymous"></script><div class="well">  <form action="/person.php" method="post">      <label for="firstName">First Name</label>      <input id = "name"class="form-control" type="text" name="firstname" value="Alex">  </form></div>

Answer 1

我认为这种方法没问题，但问题是你已经在 HTML 中设置了输入框的值，但你并没有真正使用 sessionStorage 中存储的值来更新该值。

因此，使用以下代码来查看更改：

let sname = sessionStorage.getItem("name");

let name = document.getElementById("name");

if(sname) {

    name.value = sname;

}

document.addEventListener("change", (evt) => {

  const save_name = name.value;

  console.log(sessionStorage.getItem("name"));

  sessionStorage.setItem("name", save_name);

});

Answer 2

您正在保存在 sessionStorage 中，但如果会话存储中有任何值，则不会更新页面加载时的值。添加以下代码。

$(document).ready(function() {

  const name = sessionStorage.getItem("name");

  if(name){

   document.getElementById("name").value = name

  }

})