JavaScript and JQuery Essentials Trainin... (46 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (20 Blogs)
  • jQuery UI Development (1 Blogs)
  • The Complete WebDeveloper (34 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

JavaScript Cookies – How to Create, Read and Delete Cookies?

Published on Aug 23,2019 38 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Cookies help you store user information in web pages. It is one of the most efficient methods of remembering and tracking preferences, purchases, commissions, and other information required for better visitor experience or site statistics. In this JavaScript Cookies article, we will get into the depth of cookies in the following sequence:

What are Cookies?

Cookies are data stored in small text files in your system. When a web server sends a web page to a browser, the connection shuts down, and the server forgets everything about the user.

Cookies were invented to solve the problem of remembering the information about the user. For example:

  • When a user visits a web page, his/her name can be stored in a cookie.

  • Next time the user visits the page, the cookie remembers the user name.

It remembers the user’s information among all the web pages. It contains the information as a string and in the form of a name-value pair separated by semi-colons such as:

username = Daisy Green

Now let’s see how these cookies work.

How Does it Work?

The server sends some data to the visitor’s browser in the form of a cookie. Now, the browser may accept the cookie. If it does, it is stored as a plain text record on the visitor’s hard drive.

cookie- javascript cookies - edurekaWhen the visitor arrives at another page on your site, the browser sends the same cookie to the server for retrieval. Once it is retrieved, your server knows or remembers what was stored before.

Cookies consist of 5 variable-length fields:

  • Expires − This shows the date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.

  • Domain − The domain field provides the domain name of your site.

  • Path − It is the path to the directory or web page that set the cookie. This can be left blank if you want to retrieve the cookie from any directory or page.

  • Secure − If this field contains the word “secure”, then the cookie may only be retrieved with a secure server. If this field is blank, there are no such restrictions.

  • Name=Value − This depicts the cookies that are set and retrieved in the form of key-value pairs.

Now that you know what are cookies and how it works, let’s get into the depth of JavaScript cookies.

JavaScript Cookies

In JavaScript, you can manipulate cookies with the cookie property of the Document object. JavaScript can read, create, modify, and delete the cookies that apply to the current web page. So let’s have a look at examples and understand how cookies are used in JavaScript.

Create Cookies

JavaScript can create cookies with the document.cookie property. You can create the cookie in the following way:

document.cookie = "username=Daisy Green";

You can also add an expiry date for your cookie. By default, the cookie will be deleted when the browser is closed:

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC";

You can also tell the browser what path the cookie belongs to with the help of a parameter. By default, the cookie belongs to the current page.

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC"; path=/";

Read a Cookie

Reading a cookie is as simple as writing one because of the value of the document.cookie object is the cookie. You can use this string whenever you want to access the cookie. The document.cookie string keeps a list of name=value pairs separated by semicolons, where name represents the cookie name and value is its string value.

JavaScript Cookies can be read in the following way:

var x = document.cookie;

Example:


<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function ReadCookie() {
               var allcookies = document.cookie;
               document.write ("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];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
         //-->
      </script>      
   </head>
   
   <body>     
      <form name = "myform" action = "">
         <p> click the Button to View Result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>      
   </body>
</html>

Output:

read cookie - javascript cookies - edureka

Change Cookies

JavaScript Cookies can be changed in the same way you create it:

document.cookie = "username=Mary Lian; expires=Fri, 18 Sep 2019 12:00:00 UTC; path=/";

Here, the old cookie will be overwritten.

Example:

<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.toUTCString() + ";"
               document.write ("Setting Cookies : " + "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>

Output:

Delete a Cookie

You might want to delete a cookie so that subsequent attempts to read the cookie returns nothing. To delete a cookie, you just need to set the expiry date to a time in the past.

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

Example:

<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.toUTCString() + ";"
               document.write("Setting Cookies : " + "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>

With this, we have come to the end of JavaScript Cookies. I hope you understood how you can create, read, modify and delete cookies.

Now that you know about JavaScript Loops, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

Got a question for us? Please mention it in the comments section of “JavaScript Cookies” and we will get back to you.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.