Use of cookies through jquery with real world scenarios

AliExpress.com Product - Portable Mobile Laptop Standing Desk For Bed Sofa Laptop Folding Table Notebook Desk With Mouse Pad & Cooling Fan For Office

Advertisements Section

AliExpress.com Product - Portable Foldable Adjustable Laptop Desk Computer Table Stand Tray For Sofa Bed Black

In this article we will learn about some common usage of cookies through jquery plugin for cookies. for learning about different usage of cookies I have created a simple web application in asp.net.

Business Requirement :

In this web application we have a requirement that whenever user comes first time to visit our site he/she should get a message regarding the use of cookies in our website.

Sample Application(Example):

My web application currently have only 4 pages as shown. which includes two pages("AboutUs","Home") at root level and two page("ProductList",""OurFirstProduct) at 1st level(Inside OurProduct folder).

Now for using jquery plugin for cookies we can download the plugin from Here. and place the downloaded folder in your application.

Now include these two script files in your page head one for jquery it self and other one is for jquery plugin for cookies.(with your path to that file).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="/jquery-cookie-master/src/jquery.cookie.js"></script> 

Now you can use following chuck of code to display the required message using cookie. In which we have simply place a div with id="cookieMsg" (which contains the actual message to display) and a chuck of jquery code which check if our cookie not have any value it means the user comes for the first time to our site so it displays the message and set the cookie with some value and expiry date.

<div id="cookieMsg" style="color: Gray; background-color: #e9e9e9; padding: 10px; text-align: center; width: 100%; display: none; position: relative; box-sizing: border-box;">

We use cookies on this site to enhance your user experience.
 <a href="javascript:void(0)" style="position: absolute; right: 10px; top: 8px; color: inherit; font-style: bold;">[X]</a>

</div>

  <h1>This is "Home" page</h1>

  <script type="text/javascript">
   $("#cookieMsg a").click(function () {
   $("#cookieMsg").fadeOut();
    });
  
  if (typeof $.cookie('usecookie') === 'undefined') {
      $("#cookieMsg").show()
      $.cookie("usecookie", 1, { expires: 7 });
      }
  </script>

 // above code will store cookie's value only for current level of pages

$.cookie method that we have used here it takes  $.cookie('name', 'value', { expires: expiry_duration_in_days })

Note: $.cookie method is not the default method of jquery, for that method we have downloaded jquery plugin for cookie
It looks quite simple and it will give following result. which apparently fulfill our requirements. 

But there are still some loop holes in it. for example when I visit first level page(/ourproducts/productlist.aspx) of my site for the first time it shows the message which is fine but after that when I visit to one of the pages at root level i.e "/home.aspx" or "/aboutus.aspx" it again show that message.

Now what does that means, is it storing cookie's value specific to the page ? the answer is no, then is it storing the cookie's value for entire site ?, the answer is again no.

It is storing cookie's value for all the pages at same level. i.e cookie's value set on "home.aspx" page is also available for  "aboutus.aspx" page. and the cookie's value set on "/ourproducts/productlist.aspx" page is also available for  "/ourproducts/ourfirstproduct.aspx" page.

Now we have previously set the cookie's expiry as 7 days for testing purpose I  want to set cookie's expiry as 1 minute(in similar way you can set any value in minutes). we can set this by following code.

 // setting cookie's expiry date in minutes
  var date = new Date();
  var minutes = 1;
  date.setTime(date.getTime() + (minutes * 60 * 1000));

  if (typeof $.cookie('usecookie') === 'undefined') {
     $("#cookieMsg").show()
     $.cookie("usecookie", 1, { expires: date });
   }

Now again comes to the actual requirement there are two more solutions one is to make the cookie value available for entire site for that purpose we can use following code.

      // storing cookie's value for entire site
  if (typeof $.cookie('usecookie') === 'undefined') {
     $("#cookieMsg").show()
     $.cookie("usecookie", 1 ,{ expires: date, path: "/" });
   }

In the above code path's value "/" means that it will store cookie's value at root level no metter what is our current page location.

another option could be store the cookie's value specific to each page for that purpose we can use following code.

      // storing cookie's value specific to the current page
   if (typeof $.cookie('usecookie') === 'undefined') {
     $("#cookieMsg").show()
     $.cookie("usecookie", 1,{ expires: date, path: window.location.pathname}); 
   }

In the above code path's value window.location.pathname will give current page location which means it will store cookie's value with respect to each page.