表单上的 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) {&nbsp; &nbsp; name.value = sname;}document.addEventListener("change", (evt) => {&nbsp; const save_name = name.value;&nbsp; console.log(sessionStorage.getItem("name"));&nbsp; sessionStorage.setItem("name", save_name);});

Answer 2

您正在保存在 sessionStorage 中，但如果会话存储中有任何值，则不会更新页面加载时的值。添加以下代码。$(document).ready(function() {&nbsp; const name = sessionStorage.getItem("name");&nbsp; if(name){&nbsp; &nbsp;document.getElementById("name").value = name&nbsp; }})