[英]How to save data from a form with HTML5 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>
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>
这是一个快速函数,它将在本地存储中存储<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);
请注意,此方法添加了一个永远不会删除的事件处理程序。 在大多数情况下,这不会成为问题,但您应该考虑它是否会出现在您的场景中。
在这里,使用 JQUERY 的简单解决方案是这样的..
var username = $('#username').val();
var password = $('#password').val();
localStorage.setItem("username", username);
localStorage.setItem("password", password);
要保存数据,您必须使用 localStorage.setItem 方法,而要获取数据,您必须使用 localStorage.getItem 方法。
您可以使用 javascript 应用表单验证将表单数据保存在 localstorage 中。 只需阅读这篇简单的文章https://xeeratech.com/form-validation-in-javascript-and-store-form-data-in-localstorage/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.