Question

我有一个javascript表单，我使用innerHTML来设置一些文本。

当表单提交信息丢失时。无论如何我可以把它变成“粘性”。我在想一个cookie，但这就是我所知道的。

由于

<form "action="" name="myform">
<input type="text" name='name">
<div id="theName"></div>
</form>

快速示例我正在捕获名称，并且需要div在表单提交后显示名称。

Answer 1

您需要以某种方式保留数据。有几种选择：

将其存储在服务器上。提交表单时，服务器端脚本将接收数据;它可以将其保存在数据库，会话变量或适合您的应用程序的其他形式的存储中。每当客户端使用表单重新访问页面时，让服务器使用持久数据生成表单的HTML。
使用HTML5的local storage。虽然旧版浏览器不支持，但所有现代浏览器都提供本地存储API。当用户提交表单（将事件监听器附加到表单的“提交”事件）时，您可以通过调用localStorage[key] = value并使用localStorage[key]检索表单数据来存储表单数据。
将其存储在Cookie中。虽然我不推荐这种方法，但您可以使用表单数据创建cookie。唯一的限制是数据需要表示为字符串，但我建议JSON。但是，您可能不应该使用此方法，因为cookie会针对每个请求发送到服务器;如果表单字段包含大量数据，那么您还会不必要地向服务器发送大量数据。

使用HTML5的本地存储为您提供了一种无需服务器端配置的自封装方法：

<form action="" name="myform">
  <input type="text" name="name">
  <div id="theName"></div>
</form>
<script type="text/javascript">
  (function() {
    var form = document.getElementsByName('myform')[0];
    if (localStorage['name'] !== undefined) {
      var displayArea = document.getElementById('theName');
      displayArea.textContent = localStorage['name'];
    }
    form.addEventListener('submit', function() {
      var nameField = document.getElementsByName('name')[0];
      localStorage['name'] = nameField.value;
    }, false);
  })();
</script>

Answer 2

您是将输入标记的“value”属性设置为某个空白还是空白？您可以删除（删除属性本身），以便使用最后一个值集合（仅适用于非密码类型的输入。也可以在所有浏览器中都没有尝试过。）。

或者更好的是，您可以使用像（PHP，ASP，RUBY等）这样的服务器端脚本将属性值设置为先前提交的。

<form method="post">
<input type="text" name="txtinput" id="txtinput" value="<?php echo $_POST['txtinput']?>"/>
<input type="submit" value="submit">
</form>

仅在js中执行此操作会因为使用cookie而变得更加复杂和不可靠。

PS：我假设您没有使用XHR（AJAX）提交表单，因为除非您告诉他们，否则XHR不刷新页面或重新初始化输入。

Answer 3

这应该发生在服务器端。 Javascript用于增强页面，不依赖于数据操作。

转换为PHP的脚本看起来像

<form action="" method="post" name="myform">
  <input type="text" name='name">
  <div id="theName"><?php
    if(isset($_POST['name'])) { echo $_POST['name']; }
  ?></div>
</form>

......每次都可以使用，无需调用任何JS。

你必须以某种方式处理表单数据 - 你打算如何在没有服务器端脚本的情况下检索数据？

制作粘性javascript

3 个答案: