JavaScript Cookie 保存表单

Question

我一直在用这个tutorial在线尝试保存我的表单字段之一的输入值。

到目前为止没有任何成功。

我做错了什么吗？

<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>

Answer 1

您的 setCookie 方法的 document.cookie 部分没问题，因此我只需进行一些更改即可使其工作。为了测试的目的，我还稍微改变了形式。这是代码:

<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 服务器在本地测试了它。

下面的屏幕截图显示了 Chrome 资源: