Cookies in javascript

For years, in web technology, we need to store data on the client side. Before the advent of HTML5 and its new mechanisms, every developer used cookies to achieve this goal. Unfortunately, working with cookies in JavaScript can cause a lot of headaches. This article discusses what cookies are, and how to use.

A cookie is a piece of data which is sent from a website and stored locally by the user’s browser. Cookies are needed because HTTP is stateless. This means that HTTP itself has no way to keep track of a user’s previous activities. One way to create state is by using cookies.

Cookie structure

The structure of a cookie is really simple.
CookieName: It’s nothing but several key-value pairs. Pairs are separated by semicolons, while the equal sign character separates the key from its value.
Expires: A cookie can optionally have an expiration date, after which it’s deleted. If an expiration date isn’t provided, the cookie will last until the session or browser is closed. If you set the expiration date in the past, the browser will delete the cookie. Please note that the format of the date is important, as it has to be in UTC/GMT.

Path: Moreover, you can specify a domain and a path where the cookie can be read and written. By default the path value is ‘/’, meaning that the cookie is visible to all paths in a given domain. If you don’t specify the domain, it will belong to the page that set the cookie. The way you set these data also matter. The order should be:

key-value;expiration_date;path;domain;.

JavaScript can create, retrieve, and delete cookies using the document.cookie property like:

document.cookie = "pagevisit=3; path=/;";
document.cookie = "last-visit=Mon, 1 dec 2013 10:16:00 GMT; expires=Wed, 13 dec 2013 11:00:00 GMT;";

1 2	document.cookie = "pagevisit=3; path=/;"; document.cookie = "last-visit=Mon, 1 dec 2013 10:16:00 GMT; expires=Wed, 13 dec 2013 11:00:00 GMT;";

Creating Cookie

document.cookie = "cookiename=value;expires=datetime;path=/"

1	document.cookie = "cookiename=value;expires=datetime;path=/"

function createCookie(name, value, expires, path, domain) {
  var cookie = name + "=" + escape(value) + ";";
 
  if (expires) {
    // If it's a date
    if(expires instanceof Date) {
      // If it isn't a valid date
      if (isNaN(expires.getTime()))
       expires = new Date();
    }
    else
      expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);
 
    cookie += "expires=" + expires.toGMTString() + ";";
  }
 
  if (path)
    cookie += "path=" + path + ";";
  if (domain)
    cookie += "domain=" + domain + ";";
 
  document.cookie = cookie;
}

function createCookie(name, value, expires, path, domain) {

var cookie = name + "=" + escape(value) + ";";

if (expires) {

// If it's a date

if(expires instanceof Date) {

// If it isn't a valid date

if (isNaN(expires.getTime()))

expires = new Date();

}

else

expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);

cookie += "expires=" + expires.toGMTString() + ";";

}

if (path)

cookie += "path=" + path + ";";

if (domain)

cookie += "domain=" + domain + ";";

document.cookie = cookie;

}

We need to call it like :

createCookie("website", "twitter", new Date(new Date().getTime() + 10000));
createCookie("visits", "1", 30);

1 2	createCookie("website", "twitter", new Date(new Date().getTime() + 10000)); createCookie("visits", "1", 30);

Getting Cookie we can read cookie also by using document.cookie but it’s little typical and we need to use split, substring to get the value of specific key in cookie. But by using regular expression, it may be easy like :

function getCookie(name) {
  var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");
  var result = regexp.exec(document.cookie);
  return (result === null) ? null : result[1];
}

function getCookie(name) {

var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");

var result = regexp.exec(document.cookie);

return (result === null) ? null : result[1];

}

we need to pass the key name of the cookie and it will return the value of that key eg:

getCookie("visit") ;

1	getCookie("visit") ;

Delete cookie

It’s very simple by using

document.cookie = "visits='';expires=-1; path=/";
document.cookie = cookiename=value;expires=-1;path=/

1 2	document.cookie = "visits='';expires=-1; path=/"; document.cookie = cookiename=value;expires=-1;path=/

we need to set value as empty and expires as -1

Leave a Reply Cancel reply