How to use Cookies in JavaScript

In this article I am going to explain about cookies in JavaScript.
  • 2902

JavaScript cookies

Cookies is an variable that store user information on the webpage. By which user can access information on same webpage or next page. In other word Cookies is an small piece of information store by the web browser on client machine in text file that can be retrieve latter. An JavaScript either client or server side may request to web browser for store cookies. Cookies information store as a name-value pairs.  JavaScript provide name "document.cookie" properties for manipulation of a cookies on client side.

  • Name-value:-Every cookies has name-value that store actual information by which we will search for this name when reading out the cookie information.
  • Expiry Date:-Every cookies has expiry date on which cookies trashed. If you will not set expiry date then cookies will be trashed when you will close browser.
  • Domain and path:- Every cookie  has a  Domain and path. The domain tells the browser to which domain the cookie should be sent. If you don't specify it, it becomes the domain of the page that sets the cookie.

Example

In this example we will set the name of cookies.

<head>

    <script type="text/javascript">

 

        function WriteCookie() {

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

                alert("Enter values");

                return;

            }

 

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

            document.cookie = "name=" + cookievalue;

            alert("Cookies name : " + "name=" + cookievalue);

        }

 

    </script>

</head>

<body>

    <form name="myform" action="">

    Enter name:

    <input type="text" name="customer" />

    <input type="button" value="Set Cookie" onclick="WriteCookie();" />

    </form>

</body>

</html>

In this following example we will get the name of cookies.

<html>

<head>

    <script type="text/javascript">

   function ReadCookie() {

            var allcookies = document.cookie;

            alert("All Cookies : " + allcookies);

 

            // Get all the cookies pairs in an array

            cookiearray = allcookies.split(';');

 

            // Now take key value pair out of this array

 

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

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

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

                alert("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>

In this example we will set expiry date of cookies.

<html>

<html>

<head>

    <script type="text/javascript">

 

        function WriteCookie() {

            var now = new Date();

            now.getDate(now.getDate() + 1);

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

            document.cookie = "name=" + cookievalue;

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

            alert("Setting Cookies : " + "name=" + cookievalue);

        }

 

    </script>

</head>

<body>

    <form name="formname" action="">

    Enter name:

    <input type="text" name="customer" />

    <input type="button" value="Set Cookie" onclick="WriteCookie()" />

    </form>

</body>

</html>

In this example we will delete to the cookies.

<html>

<head>

    <script type="text/javascript">

 

        function WriteCookie() {

            var now = new Date();

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

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

            document.cookie = "name=" + cookievalue;

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

            alert("Setting Cookies : " + "name=" + cookievalue);

        }

 

    </script>

</head>

<body>

    <form name="formname" action="">

    Enter name:

    <input type="text" name="customer" />

    <input type="button" value="Set Cookie" onclick="WriteCookie()" />

    </form>

</body>

</html>

Output

setcookies.jpg

Further Readings

You may also want to read these related articles: here
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 

 

© 2020 DotNetHeaven. All rights reserved.