Sunday, December 29, 2019

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


Hello readers! welcome back to another section of my tutorial on JavaScript. In my last tutorial post we discussed about the 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 uses HTTP protocol for communication and HTTP is a stateless protocol. But for a commercial website, it is required to maintain session data among the various web pages. For instance, a user registration ends after completing many pages. But how to maintain the users' session information across all web pages.

In many situations, making use of cookies is the most effective way to track and remember purchases, preferences, commissions, and as well as 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. When the visitor arrives at another page on your site, the browser sends the same cookie to the web 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 web page or directory that set the cookie. This may be blank if you intend 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, then 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 that is 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 lang. can manipulate cookies using cookie property of the Document object. JavaScript can read, create, modify and also 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 creating a cookie is to assign a string value to document.cookie object, which looks like this.

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

Here 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 there after, the cookie value will not be accessible.

Note - Cookie values may not include semicolons, whitespaces, or commas. 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 reading the cookie value.

Example

Try the following example below. 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 make use of this string whenever you want to access the stored cookie. The document.cookie string will keep a list of the name = value pairs separated by semicolons, where name is the name of a cookie and value is it's string value.

You can mske use of 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 that 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 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 web browser session by setting an expiry 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 the 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! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about the Javascript Page Redirection.

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

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 do occur whenever the user or the browser manipulates a page

Friday, December 6, 2019