保存html表单字段状态

Save html form field state

本文关键字：状态 字段 表单 html 保存      更新时间：2023-09-26

今天我在一个项目中发现了一些有趣的东西。我有一个搜索框，里面有几个字段（例如：车牌、购买日期、州），其中一些字段有一个操作员字段。（例如：>，<，=）在我发布搜索并返回结果后，说我想更改我的一个运算符，但总是更改到它的第一个元素。我能做些什么来"保存"字段的状态吗？

我可以用会话来做，但这是一个相当大的形式，所以会很难看。

谢谢你的回答！

使用localStorage:的小片段

  • 我已经安排了5秒的时间来备份表单上的所有内容
  • 加载页面后，从localStorage加载内容

window.onload = function () {
  if (typeof(Storage) !== "undefined") {
    if (typeof localStorage["name"] !== "undefined") {
      document.getElementById("name").value = localStorage["name"] ? localStorage["name"] : "";
      document.getElementById("pass").value = localStorage["pass"] ? localStorage["pass"] : "";
    }
    // Code for localStorage/sessionStorage.
    setInterval(function () {
      document.getElementById("saving").innerHTML = 'Saving...';
      setTimeout(function () {
        document.getElementById("saving").innerHTML = '';
      }, 500);
      localStorage.setItem("name", document.getElementById("name").value);
      localStorage.setItem("pass", document.getElementById("pass").value);
    }, 5000);
  }
};
strong {display: inline-block; width: 50px;}
<form action="">
  <strong>Name:</strong> <input type="text" name="name" id="name" /><br>
  <strong>Pass:</strong> <input type="password" name="password" id="pass" /><br>
  <span id="saving"></span>
</form>

注意：localStorage是代码段中的沙盒功能。所以在这里不起作用。报到JSBin：http://output.jsbin.com/bubukunoke

我最后用会话解决了这个问题。

当我发布表单时，我将所有内容保存到一个会话中，并在视图中检查它是否存在，如果存在，我将其设置为字段值。

相关文章：