Sunday, December 29, 2019

Step by step guide on how to Create, read, update and delete a cookie in JavaScript


Hello guys! evening to you all and welcome to my new tutorial post on JavaScript. In my last tutorial post we discussed about JavaScript Event tutorial with examples.

In this tutorial section, we are going to be looking into how to set cookies using JavaScript.

What are Cookies?

Web Browsers and Servers use HTTP protocol to communicate and HTTP is a stateless protocol. But for a commercial website, it is required to maintain session information among different pages. For example, one user registration ends after completing many pages. But how to maintain users' session information across all the web pages.

In many situations, using cookies is the most effective way of tracking and remembering preferences, purchases, commissions, and other information required for better visitor experience or site statistics.

You can also read our tutorial post on: JavaScript Variables

How it works

Your server sends some data to the visitor's browser in the form of a cookie. The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor's hard drive. Now, when the visitor arrives at another page on your site, the browser sends the same cookie to the server for retrieval. Once retrieved, your server remembers what was stored earlier.

Cookies are a plain text data record of 5 variable-length fields-
  • Expires - The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.
  • Domain - The domain name your site.
  • Path - The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or web page.
  • Secure - If this fied contains the word "secure", then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists.
  • Name=Value - Cookies are set and retrieved in the form of key-value pairs. 
Cookies were originally designed for CGI programming. The data contained in a cookie is automatically transmitted between the web browser and the web server, so CGI script on the server can read and write cookie values that are stored on the client.

JavaScript can manipulate cookies using cookie property of the Document object. JavaScript can read, create, modify and delete the cookies that apply to the current web page.

You can also read our tutorial post on: JavaScript Syntax

Storing Cookies

The simplest way to create a cookie is to assign a string value to the document.cookie object, which looks like this.

document.cookie = "key1 = value1; key2 = value2; expires = date";     

Here the expires attribute is optional. If you provide this attribute with a valid date or time, then the cookie will expire on a given date or time and thereafter, the cookie value will not be accessible.

Note - Cookie values may not include semicolons, commas, or whitespace. For this reason, you may want to use the JavaScript escape() function to encode the value before storing it in the cookie. If you do this, you will also have to use the corresponding unescape() function when you read the cookie value.

Example

Try the following example. It sets a customer's name in an input cookie.

<html>
     <head>
          <script  type = "text/javascript">
               <!--
                    function  WriteCookie()  {
                         if ( document.myform.customer.value == "" ) {     
                              alert("Enter some 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 = "">
               Enter name:  <input  type = "text"  name = "customer"/>
               <input  type = "button"  value = "Set Cookie"  onclick = "WriteCookie();"/>   
          </form>
     </body>
</html>

Output

Below is the output of the above example.


 Enter name:


Now your machine has a cookie called name. You can set multiple cookies using multiple key = value pairs separated by comma.

You can also read our tutorial post on: JavaScript - Switch Case

Reading Cookies

Reading a cookie is just as simple as writing one, because the value of the document.cookie object is the cookie. So you can use this string whenever you want to access the cookie. The document.cookie string will keep a list of name = value pairs separated by semicolons, where name is the name of a cookie and value is it's string value.

You can use strings' split() function to break a string into key and values as folows:

Example

Try the following example to get all the cookies.

<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 following button and see the result</p>
               <input  type = "button"  value = "Get Cookie"  onclick = "ReadCookie()"/>     
          </form>
     </body>
</html>

Note - Here length is a method of Array class which returns the length of an array. We will discuss Arrays in details in a separate tutorial post. By that time, please try to understand it properly.

Output

Below is the output of the above example.


  Click the following button and see result
  

Note - There may be some other cookies already set on your machine. The above code will display all the cookies set on your machine.

Setting Cookies Expiry Date

You can extend the life of a cookie beyond the current browser session by setting an expiration date and saving the expiry date within the cookie. This can be done by setting the 'expires' attribute to a date and time.


Example

Try the following example. It illustrates how to extend the expiry date of a cookie by one Month.

<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 Cookie : " + "name=" + cookievalue);
                    }
               //-->
          </script>
     </head>

     <body>
          <form  name = "myform"  action = "">
               Enter name: <input  type = "text"  name = "customer"/>
               <input  type = "button"  value = "SetCookie"  onclick = "WriteCookie()"/>     
          </form>
     </body>
</html>

Output

Below is the output of the above example.


 Enter name:


You can also read our tutorial post on: Css Dimensions

Deleting a Cookie

Some times you will want to delete a cookie so that subsequent attempts to read the cookie return nothing. To do this, you just need to set the expiry date to a time in the past.

Example

Try the following example below. It illustrates how to delete a cookie by setting it's expiry date to one month behind the current date.

<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 Cookie : " + "name=" + cookievalue);
                    }
               //-->
          </script>
     </head>

     <body>
          <form  name = "myform"  action = "">
               Enter name: <input  type = "text"  name = "customer"/>
               <input  type = "button"  value = "SetCookie"  onclick = "WriteCookie()"/>     
          </form>
     </body>
</html>

Output

Below is the output of the above example.


 Enter name:


Alright guys, we have come to the end of this tutorial post on JavaScript Cookies. In my next tutorial post i will be discussing JavaScript Page Redirection.

Always feel free to ask your questions via the comment box, they will be attended to as soon as possible. Follow us on our social media handles to stay updated with our latest posts. Thanks for reading and bye for now.

Sunday, December 8, 2019

JavaScript Events tutorial with examples


Hello morning to you all, welcome to my new tutorial on JavaScript. In my last tutorial post we rounded up all about JavaScript function.

In this tutorial we are going to be discussing Events in JavaScript. JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page

Friday, December 6, 2019

Saturday, November 30, 2019

Learn how to implement JavaScript Function() constructor with examples


Hello guys! evening to you all. I want to welcome you all to my new tutorial post on JavaScript. Just a quick recap of what we discussed in our previous tutorial post, we discussed about how to implement JavaScript nested functions with some examples.


Now we are going to be looking into another interesting topic on JavaScript called The Function Constructor.

Friday, November 29, 2019

Sunday, November 24, 2019

JavaScript - Loop Control


Hello everyone! morning and welcome to my new tutorial post on JavaScript. Hope you are not having any difficulties in practicing? If any of you guys are having difficulties, always feel free to ask your questions via the comment box. We will surely attend to your questions.

Now in my last tutorial post i talked about JavaScript for....in loop, but in this tutorial we are going to be looking into a way in which our loop can be controlled. This can be achieved by using the break and continue statements.

Saturday, November 23, 2019

Tuesday, November 5, 2019

Monday, November 4, 2019

Sunday, November 3, 2019

Saturday, November 2, 2019

Thursday, October 24, 2019