制作粘性javascript

我有一个javascript表单，我使用innerHTML来设置一些文本。当表单提交信息丢失时。无论如何我可以使它“粘”。我在想一个cookie，但这就是我所知道的。谢谢

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

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

已邀请:

3 个回复

响摔衅幸

您需要以某种方式持久保存数据。有几种选择：将其存储在服务器上。提交表单时，服务器端脚本将接收数据;它可以将其保存在数据库，会话变量或适合您的应用程序的其他形式的存储中。每当客户端使用表单重新访问页面时，让服务器使用持久数据生成表单的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>

拈吉勉犬姆

您是否将输入标记的“值”属性设置为某个或空白？你可以删除（删除属性本身），以便使用最后一个值集合（仅对非密码类型的输入是真的。也没有在所有浏览器中都尝试过。）。或者更好的是，您可以使用服务器端脚本（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不刷新页面或重新初始化输入。

遣莫捅炭

这应该发生在服务器端。 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 个回复

发起人

sticky

问题状态

制作粘性javascript

与内容相关的链接

3 个回复

发起人

sticky

问题状态