How can I save a cookie

Question

I'm trying to save a cookie and then load it again

I have this code

<html>
    <head>
        <script>
            var myCookies = {};

            function saveCookies()
            {
                myCookies["_uuser"] = document.getElementById("user").value;
                myCookies["_uuage"] = document.getElementById("age").value;
                //Start Reuseable Section
                document.cookie = "";
                var expiresAttrib = new Date(Date.now()+60*1000).toString();
                var cookieString = "";
                for (var key in myCookies)
                {
                    cookieString = key+"="+myCookies[key]+";"+expiresAttrib+";";
                    document.cookie = cookieString;
                }
                //End Reuseable Section
                document.getElementById("out").innerHTML = document.cookie;
            }

            function loadCookies()
            {
                //Start Reuseable Section
                myCookies = {};
                var kv = document.cookie.split(";");
                for (var id in kv)
                {
                    var cookie = kv[id].split("=");
                    myCookies[cookie[0].trim()] = cookie[1];
                }
                //End Reuseable Section
                document.getElementById("user").value = myCookies["_uuser"];
                document.getElementById("age").value = myCookies["_uuage"];
            }
        </script>
    </head>
    <body>
        User: <input type="text" id="user">
        Age: <input type="text" id="age">
        <button onclick="saveCookies()">Save To Cookies</button>
        <button onclick="loadCookies()">Load From Cookies</button>
        <p id="out"></p>
    </body>
</html>

when I type an input for both name and age, and click on save to cookies, and then clock on load from cookies, I got this "undefined" for both user and age!!

what's missing in my code, so I can save the cookie

your example works well. What browser are you using? – misterwolf Feb 07 '17 at 16:21 — misterwolf, Feb 07 '17 at 16:21

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

For Chrome cookies can only be set, when the page is running on a webserver. For example accessed via http://localhost/foo/bar.html or http://127.0.0.1/foo/bar.html

edit: you might check out as well this answer: where cookie saved for local HTML file I just tested it myself: it works with Firefox.

Otherwise it would be better for testing such cases, to put up a local webserver like apache

edited May 23 '17 at 11:53

Community

1
1

answered Feb 07 '17 at 16:15

InsOp

2,425
3
27
42

I just dragged the file to the google chrome, just like what my friend did, and it worked with him – khaled Feb 07 '17 at 16:20
@khaled check out my edited answer. it works with firefox (in a real webpage, hosted on a server, it will work with chrome as well) – InsOp Feb 07 '17 at 16:25

score 0 · Answer 2 · answered Feb 07 '17 at 16:25

I have tested your code from a web server and it works fine.

You must load it from a web server, rather from the local file system.

JSFiddle is here if you want to prove it for yourself.

https://jsfiddle.net/brx5ropp/

Note that due to JSFiddle limitations I had to move the click triggers for the buttons to code like this:

document.getElementById("load").addEventListener("click", loadCookies);
document.getElementById("save").addEventListener("click", saveCookies);

...but that is irrelevant to my answer!

How can I save a cookie

2 Answers2