Cookies in JavaScript

What are Cookies?

Normally, Cookies store user information in small text files.on your computer.

A cookie is a piece of data that is stored on your browser to be accessed by your browser. Cookies are also saved as key/value pairs.

Cookies will remember information about the user, when server forgets everything about the user after the connection is shut down.

When a user visits a web page, The name of user can be stored in a cookie.
Next time the user visits the page, the cookie “remembers” the name.

How It Works ?

Server sends some data to the visitor’s browser in the form of a cookie. The browser may accept the cookie. When the visitor go to another page, the browser sends the same cookie to the server.

Cookies are a plain text data record of 5 variable −

Expires − The date the cookie will expire
Domain − The domain name of thewebsite.
Path − The path to the directory or web page that set the cookie.
Secure − The cookie may only be retrieved with a secure server.
Name value – Cookies are set and retrieved in the form of key-value pairs

Create a Cookie with JavaScript

JS can create, read, and delete cookies with the document.cookie property.

A cookie can be created like this:

document.cookie = “username=Ram Das”;

Example

<html>

<head>

    <script type="text/javascript">
        functionWriteCookie() {
            if (document.myform.customer.value == "") {
                alert("Enter value!");
                return;
            }
            cookievalue = escape(document.myform.customer.value) + ";";
            document.cookie = "name=" + cookievalue;
            document.write("Setting Cookies : " + "name=" + cookievalue);
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <p>Enter name:
            <input type="text" name="ename" />
        </p>
        <br>
        <p>
            <input type="button" value="Set Cookie" onclick="WriteCookie();" />
        </p>
        <br>
    </form>
</body>

</html>

<html>

<head>

functionWriteCookie() {

if (document.myform.customer.value == "") {

alert("Enter value!");

return;

}

cookievalue = escape(document.myform.customer.value) + ";";

document.cookie = "name=" + cookievalue;

document.write("Setting Cookies : " + "name=" + cookievalue);

}

</script>

</head>

<body>

<p>Enter name:

</p>

<br>

<p>

</p>

<br>

</form>

</body>

</html>

Read a Cookie with JavaScript

With JS, cookies can be read like this:

var x = document.cookie;

Example

<html>

<head>
    <script type="text/javascript">
        functionReadCookie() {
            varallcookies = document.cookie;
            document.write("All Cookies : " + allcookies);
            cookiearray = allcookies.split(';');
            for (var i = 0; i < cookiearray.length; i++) {
                name = cookiearray[i].split('=')[0];
                value = cookiearray[i].split('=')[1];
                document.write("Key is : " + name + " and Value is : " + value);
            }
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <input type="button" value="Get Cookie" onclick="ReadCookie()" />
    </form>
</body>

</html>

<html>

<head>

functionReadCookie() {

varallcookies = document.cookie;

document.write("All Cookies : " + allcookies);

cookiearray = allcookies.split(';');

for (var i = 0; i < cookiearray.length; i++) {

name = cookiearray[i].split('=')[0];

value = cookiearray[i].split('=')[1];

document.write("Key is : " + name + " and Value is : " + value);

}

</script>

</head>

<body>

</form>

</body>

</html>

Change a Cookie with JavaScript

With JS, cookies can be changed like this:

document.cookie = “username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;

Example

In this example the cookie extend the expiry date by 1 Month.

<html>

<head>
    <script type="text/javascript">
        functionWriteCookie() {
            var now = new Date();
            now.setMonth(now.getMonth() + 1);
            cookievalue = escape(document.myform.customer.value) + ";"

            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write("Setting Cookies : " + "name=" + cookievalue);
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <p>Enter name:
            <input type="text" name="name" />
        </p>
        <br>
        <input type="button" value="Set Cookie" onclick="WriteCookie()" />
    </form>
</body>

</html>

<html>

<head>

functionWriteCookie() {

var now = new Date();

now.setMonth(now.getMonth() + 1);

cookievalue = escape(document.myform.customer.value) + ";"

document.cookie = "name=" + cookievalue;

document.cookie = "expires=" + now.toUTCString() + ";"

document.write("Setting Cookies : " + "name=" + cookievalue);

}

</script>

</head>

<body>

<p>Enter name:

</p>

<br>

</form>

</body>

</html>

Delete a Cookie with JavaScript

With JS, cookies can be delete like this:

Just set the expires parameter to a passed date:

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

Example

<html>

<head>
    <script type="text/javascript">
        functionWriteCookie() {
            var now = new Date();
            now.setMonth(now.getMonth() - 1);
            cookievalue = escape(document.myform.customer.value) + ";"

            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write("Setting Cookies : " + "name=" + cookievalue);
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <p>Enter name:
            <input type="text" name="name" />
        </p>
        <input type="button" value="Set Cookie" onclick="WriteCookie()" />
    </form>
</body>

</html>

<html>

<head>

functionWriteCookie() {

var now = new Date();

now.setMonth(now.getMonth() - 1);

cookievalue = escape(document.myform.customer.value) + ";"

document.cookie = "name=" + cookievalue;

document.cookie = "expires=" + now.toUTCString() + ";"

document.write("Setting Cookies : " + "name=" + cookievalue);

}

</script>

</head>

<body>

<p>Enter name:

</p>

</form>

</body>

</html>

Full Example

<html>

<head>
    <script>
        functionsetCookie(jsname, jsvalue, jsdays) {
            varjsd = new Date();
            jsd.setTime(jsd.getTime() + (jsdays * 24 * 60 * 60 * 1000));
            varjsexpires = "jsexpires=" + jsd.toGMTString();
            document.cookie = jsname + "=" + jsvalue + ";" + jsexpires + ";path=/";
        }

        functiongetCookie(jsname) {
            var name = jsname + "=";
            vardecodedCookie = decodeURIComponent(document.cookie);
            varjca = decodedCookie.split(';');
            for (var i = 0; i < jca.length; i++) {
                var c = jca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    returnc.substring(name.length, c.length);
                }
            }
            return "";
        }

        functioncheckCookie() {
            varjsuser = getCookie("username");
            if (jsuser != "") {
                alert("Welcome " + jsuser);
            } else {
                jsuser = prompt("Enter your name:", "");
                if (jsuser != "" && jsuser != null) {
                    setCookie("username", jsuser, 30);
                }
            }
        }
    </script>
</head>

<body onload="checkCookie()"></body>

</html>

<html>

<head>

functionsetCookie(jsname, jsvalue, jsdays) {

varjsd = new Date();

jsd.setTime(jsd.getTime() + (jsdays * 24 * 60 * 60 * 1000));

varjsexpires = "jsexpires=" + jsd.toGMTString();

document.cookie = jsname + "=" + jsvalue + ";" + jsexpires + ";path=/";

}

functiongetCookie(jsname) {

var name = jsname + "=";

vardecodedCookie = decodeURIComponent(document.cookie);

varjca = decodedCookie.split(';');

for (var i = 0; i < jca.length; i++) {

var c = jca[i];

while (c.charAt(0) == ' ') {

c = c.substring(1);

}

if (c.indexOf(name) == 0) {

returnc.substring(name.length, c.length);

}

return "";

}

functioncheckCookie() {

varjsuser = getCookie("username");

if (jsuser != "") {

alert("Welcome " + jsuser);

} else {

jsuser = prompt("Enter your name:", "");

if (jsuser != "" && jsuser != null) {

setCookie("username", jsuser, 30);

}

</script>

</head>

</html>