Error in getting cookie value using Javascript

Question

I am trying to add and retrieve cookie using JavaScript. My code is

   function setCookie(name,value,days) {
                    var date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    var expires = "; expires=" + date.toGMTString();            
                    document.cookie = name + "=" + value + expires + ";";
                    alert("Hello you are : "+getCookie(name)); // displaying alert message 'Hello you are :'
            }
            function getCookie(cname) { //any problem with this code?
                var rcookies = document.cookie;
                var cookiearray = rcookies.split(";");
                for (i=0;i<cookiearray.length;i++){
                    var value=cookiearray[i];
                    value=value.split("=");
                if(value[0]==cname){
                    return value[1];
                }
                }
                return "";
            }
    
    function checkCookie() {
        var user = getCookie("user");
        if (user != "") {
            alert("You are " + user); // This alert is Never displayed But it need to be. 
        } else {
            user = document.getElementById("name").value;
            alert(user); // displaying the value of text field
            setCookie("user", user, 1);
        }
    }

    <form>
     <input type="text" id="name" name="name" required="required">
     <input type="button" onclick="checkCookie();" id="buttons" name="button" value="cookie">
    </form>
   

The problem is when I click on the button it set the cookie(I saw it in 'view site information', it was there) But when I try to get the cookie using getCookie method it's not showing the cookie value saved in cookies. And also when I refresh the page and press the 'view site information' icon to see cookie again, it shows 0 cookies there. what's wrong with the code? Or any mistake I'm doing?

Answer 1

Your button submits the form. If you don't need to submit a form, then don't use the form tag, or else put the button outside of it. Alternatively, cancel the default action of a button click.

With this HTML (without form) it works fine:

<input id="name"><button onclick="checkCookie()">Check</button>

See it run in this fiddle

If you need the form tag, then cancel the default effect of the click by adding return false in the onclick attribute:

<form>
    <input type="text" id="name" name="name" required="required">
    <input type="button" onclick="checkCookie();return false;" id="buttons" name="button" value="cookie">
</form>

See fiddle.

Local files

When you access your web page via the file:// protocol, the support for cookies is not guaranteed: it depends on the browser. Check out:

• Where are cookies saved for a local HTML file?

So make sure to place your web page on a web server. You can install one on your PC in case you don't want to actually place it on the internet.

Alternatively, you could decide to use localStorage instead of cookies. That has better support for file:// protocol, and has an easier syntax anyway.