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

Posted 2023-03-05

【中文标题】关闭并重新打开后继续填写 HTML 表单

【英文标题】：Continue HTML form filling after closing and re-opening again

【发布时间】：2016-07-25 02:20:47

【问题描述】：

有什么方法可以临时保存 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 /> 

【问题讨论】：

您可以使用 localStorage 设置值，然后在重新打开页面时使用 JS 重置它们。注意 - 不要使用 sessionStaorage，因为当他们关闭页面然后重新加载它时，它会被清除。

您需要将数据保存在服务器上吗？如果没有，请使用localStorage。

@gavgrif 谢谢你的建议，但我无法正确实现它，用我尝试过的localStorage 更新了我的问题，但没有成功。

@Xufox 无所谓，反正就是想看看怎么实现，关闭浏览器后用户可以继续填表。

【参考方案1】：

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

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

【参考方案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>

【讨论】：

感谢您的回答，但它对我不起作用。用详细信息更新了我的问题。

您好，我发现您必须将脚本放在表单末尾的问题

现在刷新浏览器后它总是保持字词Hitesh，我怎么能改变它它返回用户在刷新浏览器之前输入的内容而不是静态文本？

刷新后仍然返回Hitesh 我需要保存它而不点击任何按钮。

如果不点击按钮表单如何发送数据？？