Javascript Cookies

A Javascript cookie is nothing but a small piece of data that's stored in user's browser and can be picked up by the web pages when it requires. Cookies are set to expire after a certain length of time. They are limited to storing string values only. It contains some data:

  • A name-value pair containing the actual data
  • An expiry date after which it is no longer valid
  • The domain and path of the server it should be sent to

What Kinds of Data Can Be Stored in a Cookie?

A cookie is basically a string of text characters not longer more than 4 KB. Cookies are set in the form of name/value pairs, separated by semi-colons.

Cookies has some limitation, some browsers will have a limit to how many cookies they can store, usually 300 cookies or more, of which there may be 20 cookies per domain name. A total of 4 KB (after encoding) of cookies can be stored for any domain or path.

Example

"user=d33dndn3; path=/; site=techstrikers.com; expires=Thu, 2 Jan 2015 20:47:11 UTC;"

How cookies work

A Cookie is text information that is transferred from the server to your Browser via the HTTP protocol and then stored on your hard drive. If a site uses a Cookie then everytime you visit that site, if the browser has a Cookie stored on it, it transfers that Cookie to that site. The program on the site using the Cookie then access the information and acts upon it. It is important to understand here that a Cookie will only be transfered to the site that created it. Part of the Cookie is the domain name of the site that created it as well as the path to the program that access it. Unless the domain and path match exactly as they were set, the Cookie IS NOT TRANSFERED! There is no way for someone from one site to see the contents of the Cookie from another site.

How to Set a Cookie

In Javascript setting a cookie is very simple. Just assign the string you want for the cookie to the document.cookie property. For example, if you want to set the cookie, you can simply include the following JavaScript code.

<!DOCTYPE html>
<html>
<head>
<title>Javascript Cookies Set Example</title>
<SCRIPT LANGUAGE="JavaScript">
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
//call above function to set the cookies
createCookie('ppkcookie','testcookie',7);
<SCRIPT>
</head>
<body>
</body>
</html>
Try Now

How to Read a Cookie

To read a cookie, you need cookies name to read back from browser. Call this function and pass the name of the cookie. Put the name in a variable. First check if this variable has a value then do whatever is necessary.

<!DOCTYPE html>
<html>
<head>
<title>Javascript Cookies Read Example</title>
<SCRIPT LANGUAGE="JavaScript">
function readCookie ( cookie_name )
{
  var cookie_string = document.cookie ;
  if (cookie_string.length != 0) {
    var cookie_value = 
	cookie_string.match ( '(^|;)[\s]*' + cookie_name + '=([^;]*)' );
    return decodeURIComponent ( cookie_value[2] ) ;
  }
  return '' ;
}

//call above function to read a cookie
readCookie('ppkcookie');
document.write(readCookie('ppkcookie'));
<SCRIPT>
</head>
<body>
</body>
</html>
Try Now

How to Delete a Cookie

delete is extremely simple. There are times when you may want to delete a cookie, such as when a visitor logs out of your site.

<!DOCTYPE html>
<html>
<head>
<title>Javascript Cookies Delete Example</title>
<SCRIPT LANGUAGE="JavaScript">
function deleteCookie(name) {
	createCookie(name,"",-1);
}

//call above function to read a cookie
deleteCookie('ppkcookie');
document.write('Successfully deleted Cookies!');
<SCRIPT>
</head>
<body>
</body>
</html>
Try Now

See Also

Javascript Built in String Object
Javascript Built in Number Object
Javascript Built in Math Object
Javascript Built in Date Object
Javascript Built in Arrays Object
Javascript Built in Boolean Object
Javascript Built in RegExp Object
Javascript Built in JSON Object


 
SHARE THIS IF YOU LIKE!
submit to reddit
SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.