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

时间:2013-06-13 12:56:13

标签: javascript html5 forms local-storage

我有一个表单可以登录网站但不在我的网站中,我希望它们可以通过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>

5 个答案:

答案 0 :(得分:37)

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>

答案 1 :(得分:1)

这是一个快速功能,可以将<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);

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

答案 2 :(得分:0)

要保存您必须使用的数据 localStorage.setItem方法并获取您必须使用的数据 localStorage.getItem方法。

答案 3 :(得分:0)

在这里,使用JQUERY的简单解决方案就是这样。

var username = $('#username').val();
var password = $('#password').val();
localStorage.setItem("username", username);
localStorage.setItem("password", password);

答案 4 :(得分:0)

您可以使用javascript应用表单验证将表单数据保存在本地存储中。只需阅读这篇简单的文章 https://xeeratech.com/form-validation-in-javascript-and-store-form-data-in-localstorage/