具有默认值的表单上的 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
  }
})