关闭并重新打开后继续填写 HTML 表单

Question

有什么方法可以临时保存 HTML 表单中的填充数据？我的意思是如果我有这样的表格：

Name    [ John  ]
Email   [       ]
Address [       ]

关闭窗口后重新进入www.domain.com/form.phpJohn的值还是会在Name文本框中输入？

我应该使用SESSIONS 吗？还是应该自动将每个输入的字段插入数据库？你有什么想法吗？

更新

我已尝试使用 Chrome / Microsoft Edge 进行跟踪，但未成功，刷新浏览器后填充的字段未保存。也许做错了什么？

  <script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("FirstName", "Hitesh");
    // Retrieve
    document.getElementById("FirstName").value = localStorage.getItem("FirstName");
} else {
    document.getElementById("FirstName").value = "Sorry, your browser does not support Web Storage...";
}
  </script>

<input id="FirstName" type="text" name="FirstName" class="field-style" placeholder="First Name" required /> 

Answer 1

最好使用 cookie 将表单字段数据存储在本地存储中，因为它可以通过 JavaScript 轻松处理（考虑到存储非常私密的数据不是一个好主意，即使 cookie 很快就会过期退出）。

为了在填充字段后立即设置 cookie，您可以对字段使用 onFocusOut 事件侦听器。当用户关注每个字段时，在 cookie 上设置输入字段的值。

Answer 2

这是带有自动填充功能的表单示例，您可以使用本地存储

 <input id="FirstName" type="text" name="FirstName" class="field-style" placeholder="First Name" required onchange="save()"/> 

 <script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    if(localStorage.getItem("FirstName")!=""){

    }else{
    // Store
        localStorage.setItem("FirstName", "Hitesh");
    }
    // Retrieve
    document.getElementById("FirstName").value = localStorage.getItem("FirstName");
} else {
    document.getElementById("FirstName").value = "Sorry, your browser does not support Web Storage...";
}
 function save(){
    var name = document.getElementById('FirstName').value;
  localStorage.setItem("FirstName", name);
 }    
  </script>