如何使用 HTML5 本地存储从表单中保存数据？

Question

我有一个可以登录网站但不能登录我的网站的表单，我希望它们使用 HTML5 本地存储将表单数据保存在我的网站中。但不是如何。任何想法？我的表格是这样的：

 <form action="http://issuefy.ca.vu/on/login.php" class="form-login"  method="post" />
<input name="email" type="email" id="email" required="" placeholder="Email" />
<input name="password" type="password" required="" placeholder="Contraseña" />
</form>

原文由 Jaumesv 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

LocalStorage 有一个 setItem 方法。你可以像这样使用它：

 var inputEmail= document.getElementById("email");
localStorage.setItem("email", inputEmail.value);

当你想获取值时，你可以这样做：

 var storedValue = localStorage.getItem("email");

也可以在单击按钮时存储值，如下所示：

 <button onclick="store()" type="button">StoreEmail</button>

<script  type="text/javascript">
  function store(){
     var inputEmail= document.getElementById("email");
     localStorage.setItem("email", inputEmail.value);
    }
</script>

原文由 CocLn 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个快速函数，它将 <input> ， <textarea> 等的值存储在本地存储中，并在页面加载时恢复它。

 function persistInput(input)
{
  var key = "input-" + input.id;

  var storedValue = localStorage.getItem(key);

  if (storedValue)
      input.value = storedValue;

  input.addEventListener('input', function ()
  {
      localStorage.setItem(key, input.value);
  });
}

您的输入元素必须有一个 id 指定，它在此函数的所有用法中是唯一的。正是这个 id 标识了本地存储中的值。

 var inputElement = document.getElementById("name");

persistInput(inputElement);

请注意，此方法添加了一个永远不会删除的事件处理程序。在大多数情况下，这不会成为问题，但您应该考虑它是否会出现在您的场景中。

原文由 Drew Noakes 发布，翻译遵循 CC BY-SA 3.0 许可协议