JavaScript Cookie保存表单 [英] JavaScript Cookie Save Form

问题描述

我一直在在线使用此教程尝试并保存我的表单字段之一的输入值.

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 class="field" type="text" name="email-field" placeholder="e-mail" style="text-transform: lowercase;" autofocus>
<br>
<input class="field" 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 class="field" type="text"  onkeydown="if (event.keyCode == 13) document.getElementById('submitButton').click()" id="emailField" name="email-field" placeholder="e-mail" style="text-transform: lowercase;" autofocus>
    <br>
    <input class="field" type="password" id="password" name="pass" placeholder="password">
    <br>
    <br> 
    <button id="submitButton" 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:

这篇关于JavaScript Cookie保存表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！