Html 如何使用 HTML5 本地存储保存表单中的数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17087636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to save data from a form with HTML5 Local Storage?
提问by Jaumesv
I have a form that makes logging into a website but not in mine and I want them to be saved form data in my web with HTML5 local storage. But not how. Any idea? My form is this:
我有一个可以登录网站但不在我的网站上的表单，我希望它们通过 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>
回答by CocLn
LocalStorage has a setItem method. You can use it like this:
LocalStorage 有一个 setItem 方法。你可以这样使用它：
var inputEmail= document.getElementById("email");
localStorage.setItem("email", inputEmail.value);
When you want to get the value, you can do the following:
当你想要获取值时，你可以执行以下操作：
var storedValue = localStorage.getItem("email");
It is also possible to store the values on button click, like so:
也可以在单击按钮时存储值，如下所示：
<button onclick="store()" type="button">StoreEmail</button>
<script type="text/javascript">
function store(){
var inputEmail= document.getElementById("email");
localStorage.setItem("email", inputEmail.value);
}
</script>
回答by Drew Noakes
Here's a quick function that will store the value of an <input>, <textarea>etc in local storage, and restore it on page load.
下面是一个简单的功能，将存储的价值<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);
});
}
Your input element must have an idspecified that is unique amongst all usages of this function. It is this idthat identifies the value in local storage.
您的输入元素必须具有id在此函数的所有用法中唯一的指定。正是这个id标识了本地存储中的值。
var inputElement = document.getElementById("name");
persistInput(inputElement);
Note that this method adds an event handler that is never removed. In most cases that won't be a problem, but you should consider whether it would be in your scenario.
请注意，此方法添加了一个永远不会删除的事件处理程序。在大多数情况下，这不会成为问题，但您应该考虑它是否会出现在您的场景中。
回答by Kishan Patel
Here,Simple solution using JQUERY is like this..
在这里，使用 JQUERY 的简单解决方案是这样的..
var username = $('#username').val();
var password = $('#password').val();
localStorage.setItem("username", username);
localStorage.setItem("password", password);
回答by Shahala Danish
To save the data you have to use localStorage.setItem method and to get the data you have to use localStorage.getItem method.
要保存数据，您必须使用 localStorage.setItem 方法，而要获取数据，您必须使用 localStorage.getItem 方法。
