Deal with JavaScript and Cookies

JavaScript cookie is the most efficient method of tracking and remembering preferences, lets you store user information in small text files on computer.

By definition, a cookie is a nothing but a piece of data that is sent from a website and stored locally by the user’s browser.

Basically, web browsers and servers use HTTP protocol for communicating and we know that HTTP is a stateless protocol. That means HTTP itself has no way to keep tracking of a user’s old activities.

So, cookies are used to remember any information about the user.

For example, when any user visits a web page, his name can be stored in a cookie so that, next time when the user visits the page, the cookie “remembers” his name.

Cookies value are saved in name=value pairs: name=Jane

Cookies consists of plain text data record of variable length fields: Expires, Domain, Path, Secure and Name=Value.

How It Works ?

Visitor’s browser gets data from server in the form of a cookie. If browser accept cookie then it is stored as plain text on the visitor’s computer. Then, when visitor arrives other page on the site, browser sends same cookie for retrieval to the server.

Read Also: jQuery Cookie

Create a Cookie with JavaScript

Cookie can be created like below:

document.cookie=”username=Jane Doe”;

By default, cookie sets the path to the current page but, you can also change the path.

document.cookie=”username=Jane Doe; expires=Thu, 24 Mar 2016 23:26:45 UTC; path=/mydir”;

Expires attribute is optional but, you can provide a valid date or time.

Reading Cookies

Same as writing one, you can use document.cookie object for reading.

var x = document.cookie;
cookie_arr = x.split(';');
for(var i=0; i<cookie_arr.length; i++){
name = cookie_arr[i].split('=')[0];
value = cookie_arr[i].split('=')[1];
document.write ("Key : " + name + " - Value : " + value);
}

Modify a Cookie

You can change a cookie in the same way you created. Here the old cookie will be overwritten.

document.cookie="username=Jane Doe; expires=Thu, 26 Mar 2016 23:26:45 UTC; path=/";

Deleting a Cookie

For deleting a cookie, you need to change the expiry date to a passed date.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

No need to specify the cookie value while deleting.

Sometimes, cookies are used in the web application to identify a user’s authenticated session. So, by stealing cookie from web application, anyone can lead to hijack the authenticated user’s session.