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.
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.