JavaScript Cookie保存表单
问题说明
我一直在在线使用此教程尝试并保存我的表单字段之一的输入值.
I've been using this tutorial online to try and save the input value for one of my form fields.
到目前为止没有任何成功.
So far without any success.
我做错什么了吗?
<script type="text/javascript">
var today = new Date();
var expiry = new Date(today.getTime() 30 * 24 * 3600 * 1000); // plus 30 days
function setCookie(name, value) {
document.cookie=name "=" escape(value) "; path=/; expires=" expiry.toGMTString();
}
function storeValues(form) {
setCookie("email", form.email-field.value);
return true;
}
if(email = getCookie("email")) document.getElementById('login-form').email-field.value = email-field;
function getCookie(name) {
var re = new RegExp(name "=([^;] )");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}
document.write(getCookie("email"));
</script>
HTML:
<form action="" method="post" id="login-form">
<input type="text" name="email-field" placeholder="e-mail" autofocus>
<br>
<input type="password" name="pass" placeholder="password">
<button type="submit"></button>
正确答案
您的setCookie方法的document.cookie部分还可以，因此我只需要进行一些更改即可使其工作.出于测试目的，我还更改了表格.这是代码:
Your setCookie method's document.cookie part was okay, so I only had to make a couple of changes to make it work. For test purposes, I also changed the form a bit. Here is the code:
<form action="Cookies.html" method="post" id="login-form">
<input type="text" onkeydown="if (event.keyCode == 13) document.getElementById('submitButton').click()" name="email-field" placeholder="e-mail" autofocus>
<br>
<input type="password" name="pass" placeholder="password">
<br>
<br>
<button onclick="setCookie('email', 'emailField')" type="submit">set Cookie email</button>
<br>
<button onclick="setCookie('password', 'password')" type="button">set Cookie password</button>
<br>
<button onclick="displayCookieValue('email')" type="button">display Cookie email</button>
<br>
<button onclick="displayCookieValue('password')" type="button">display Cookie password</button>
<br>
</form>
<div id="value"></div>
<script>
var today = new Date();
var expiry = new Date(today.getTime() 30 * 24 * 3600 * 1000); // plus 30 days
function setCookie(name, id) {
var element = document.getElementById(id);
var elementValue = escape(element.value);
document.cookie = name "=" elementValue "; path=/; expires=" expiry.toGMTString();
console.log(document.cookie);
}
function storeValues(form) {
setCookie("email", form.email - field.value);
return true;
}
function displayCookieValue(name) {
var value = getCookie(name);
var element = document.getElementById("value");
element.innerHTML = "Cookie name: " name ", value " value;
}
function getCookie(name) {
var re = new RegExp(name "=([^;] )");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}
</script>
注意，它还将密码值存储为cookie值，这在生产中可能不是一个好主意:-)另外，我还使用计算机上的Apache服务器在本地对其进行了测试.
Note, it also stores the password value as the cookie value which in production is probably not a good idea :-) Also I tested it locally by using Apache server on my computer.
下面的屏幕截图显示了Chrome资源:
Screenshot below displays Chromes resources:
这篇好文章是转载于：学新通技术网
