JavaScript Cookie Save Form

Question

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.

Am I doing something wrong?

<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

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>

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.

Screenshot below displays Chromes resources: