保存html表单字段状态

时间:2016-04-29 09:11:42

标签: javascript html forms search

今天我在其中一个项目中想出了一些有趣的东西。我有一个包含多个字段的搜索框(例如:车牌,购买日期,州),其中一些还有一个操作员字段。 (例如:>,<,=) 在我发布我的搜索并返回结果之后说我想要更改我的一个操作符但总是更改为它的第一个元素。有什么办法可以“保存”田地的状态吗?

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

感谢您的回答!

2 个答案:

答案 0 :(得分:1)

使用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>
&#13;
&#13;
&#13;

注意: localStorage是摘要中的沙盒功能。所以不在这里工作。签入JSBin:http://output.jsbin.com/bubukunoke

答案 1 :(得分:0)

我最后解决了会话的问题。

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