JQuery tutorial, cookies, frequently used tags, javascript most used syntex, JQuery basics for professionals Part 3

Working with Cookies in jQuery using JQuery plugin and without plugin, or you can say using JavaScript only a traditional way.

<script src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.cookie.js"></script>

$.cookie("UserAge", 43); // this will save 43 in you cookie named UserAge.

$.cookie("UserAge"); // will give cookie value = 43.

$.removeCookie("UserAge"); // cookie removed.

$.cookie("city", "Indore", {path: "/", domain: "abc.com"});
$.cookie("name", "Lap", {expires: new Date(2018, 12, 31, 11, 59, 00) }); // expire on specific date

Create expiring cookie, 7 days from then:

$.cookie('name', 'value', { expires: 7 });

Create expiring cookie, valid across entire site:

$.cookie('name', 'value', { expires: 7, path: '/' }); 

This article showed you how to manage cookies using jquery.cookie, a jQuery plugin. It solves many problems by abstracting cookie implementation details into a few simple, flexible methods. In case you need further clarification or additional examples, please refer to the official documentation.
 
Now other tradition way is,


var ck = getCookie("CookieName"); // get
setCookie("CookieName","value",1); // set

Code:

function setCookie(c_name,value,expdays)
 {
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + expdays);
  var c_value=escape(value) + ((expdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie=c_name + "=" + c_value+"; path=/";
 }
function getCookie(c_name)
 {
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");
  if (c_start == -1){ c_start = c_value.indexOf(c_name + "="); }
  if (c_start == -1){ c_value = null; }
  else
    {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1){ c_end = c_value.length;  }
    c_value = unescape(c_value.substring(c_start,c_end));
    }
  return c_value;
 }

var windowWidth = $(window).width(); //retrieve current window width
  

var windowHeight = $(window).height(); //retrieve current window height

var documentWidth = $(document).width(); //retrieve current document width

var documentHeight = $(document).height(); //retrieve current document height

var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll Top position

var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position 

Blog Part 1 (Basics, Selectors and scroll bar)
Blog Part 2 (Get and set values of different elements)
Blog Part 3 (JavaScript windows code and Cookies) 

 

--

Regards,

Praveen Pandit

MCTS; MCPD

Keep Learning !!