制作粘性 JavaScript

Question

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

当表单提交时，信息就会丢失。无论如何我可以让它“粘性”。我正在考虑一个cookie，但这就是我所知道的全部。

谢谢

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

简单的例子我正在捕获名称并需要 div 在表单提交后显示名称。

Answer 1

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

• 将其存储在服务器上。提交表单后，您的服务器端脚本将接收数据；它可以将其保存在数据库、会话变量或适合您的应用程序的其他形式的存储中。每当客户端重新访问包含表单的页面时，让服务器使用持久数据生成表单的 HTML。
• 使用 HTML5 的本地存储。虽然旧版浏览器不支持，但所有现代浏览器都提供本地存储 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

您是否将输入标签的“值”属性设置为某些内容或空白？您可以删除（删除属性本身），以便使用最后设置的值（仅适用于非密码类型输入。此外，还没有在所有浏览器中尝试过。）。

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

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

由于您要使用 cookie，因此仅在 js 中执行此操作要复杂得多且不可靠。

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。

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