http://www.thesitewizard.com/javascripts/cookies.shtml
How to Use Cookies in JavaScript
Cookies are bits of data that a browser stores in your visitor's computer. They are useful in that they allow you to store things like your visitor's preferences when they visit your site or other types of data specific to a particular user.
What Kinds of Data Can Be Stored in a Cookie?
A cookie is basically a string of text characters not longer than 4 KB. Cookies are set in name=value pairs, separated by semi-colons. For example, a cookie might be a string like the following:
"MyCookieName=myvalue; max-age==" + 60*60*24*30 + "; path=/; domain=example.com"
" MyCookieName " is the name of the cookie I want to use and set and contains the real data that I wish to set.
· max-age
Cookies have, by default, a lifespan of the current browser session. As soon as your visitor closes his browser, your cookie disappears. To make it last longer, you will need to set the max-age variable to contain the number of seconds you want the cookie to last.
For example, if you want your cookie to last 30 days, set it to 2,592,000. Actually instead of pre-calculating this and putting it into your script, you can have the JavaScript interpreter calculate it for you at run time.
· path
By default cookies are valid only for web pages in the directory of the current web page that stored them, as well as its descendants. That is, if a cookie is set by http://example.com/abc/webpage.html, it will be valid for http://example.com/abc/yet-another-page.html as well as http://example.com/abc/Sub-Folder/index.html, but not for http://example.com/index.html.
If you want the cookie to be valid in some other directory, say, http://example.com/special/, you will need to set the path variable to contain the value "/special". If you want the cookie to be valid everywhere on your site, set it to the root of your web directory, that is, "/".
· domain
Another special variable name that you may want to take note of is the domain variable. Cookies set in sub-domains like www.example.com will only be valid for that subdomain. If you want it to be valid for all sub-domains of example.com, you will need to set the domain to point to "example.com". The cookie will then be valid for "www.example.com", "blog.example.com", and whatever other subdomains that you may have.
Note that for security reasons, if your domain is example.com, browsers will not accept a cookie for a different domain, like google.com.
· secure
There's another variable that has special meaning: secure. This variable should not be assigned any value. Including it means that the cookie will only be sent if your visitor is visiting your website over a secure connection.
· expires
The expires variable is obsolete although still supported by today's browsers. Use the max-age variable instead, since it is easier to use. Be careful not to use "expires" as a variable name to store your data as well.
· No spaces, commas, semi-colons
Your cookie values cannot have any embedded whitespaces, commas or semi-colons. If you have any, they must be converted to its "encoded" equivalent. The easiest way to do this is to use the encodeURIComponent() function to encode it, and the decodeURIComponent() function to decode it when you read the cookie.
Expanding on my earlier example, if you want to set a "theme" variable to "blue theme", you can do it this way:
"Cookiename=" + encodeURIComponent("value") + "; max-age=" + 60*60*24*30 + "; path=/; domain=example.com"
· Cookie Limits
Although different browsers may implement different limits for cookies, the bare minimum that they are supposed to support is as follows:
- Cookie length: 4 KB. The total length of your string, including all the variables with special meaning, should not be more than 4,096 characters.
- Maximum number of cookies per web server: 20.
- Total number of cookies supported by the browser: 300. This includes cookies stored by other websites.
How to Set a Cookie
Setting a cookie is extremely simple. Just assign the string you want for the cookie to the document.cookie property. For example, if I want to set the cookie given in my example above, I can simply include the following JavaScript code.
document.cookie =
"cookiename=" + encodeURIComponent("value") +
"; max-age=" + 60*60*24*30 +
"; path=/; domain=example.com" ;
How to Read a Cookie
Setting a cookie is great and all that, but a cookie is only useful if one can actually read what one has set previously.
To read a cookie, just read the string currently held in document.cookie. Since the string includes all the usual overhead for a cookie, like "max-age", "path" and "domain", you will need to parse the string to obtain the value you want. There are many ways to do this, such as splitting the string into separate tokens, using one of the substring search functions, or using regular expressions.
The following function allow you to easily get the cookie value you want by simply specifying the variable name.
function get_cookie ( 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 '' ;
}
If get_cookie() cannot find the cookie, it will return an empty string. This may happen even if you have set a cookie, since the visitor may have deleted it, or alternatively, disabled cookie support in his/her browser.
How to Delete a Cookie
There are times when you may want to delete a cookie, such as when a visitor logs out of your site. To do this, set the max-age variable to 0 (zero) for the same cookie in the same path and domain.
Issues :
Setting cookie using JavaScript is working fine in Chrome and Firefox but IE deleting the cookies on exit even if expiry date is set to 100 years from now.
After researching a bit I came to know that it is not creating cookie with the expiry date as I send but just creating session cookies(without any expiry date and will be deleted once we close the browser).
I thought time format which i am using to set expiry date might not be acceptable to IE.
So I changed it to differed format(GMT format).
Also when I am trying to read cookies using normal array and split Firefox is not recognising my cookie for some reason.I have to use the substring method to get my cookie.
Check my code :
function ReadCookie(cookieName) {
var allcookies = document.cookie;
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for (var i = 0; i < cookiearray.length; i++) {
var value = '';
var name = '';
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
var searchFor = cookieName + "=";
//alert("Key is : " + name + " and Value is : " + value);
var start = document.cookie.indexOf(searchFor) + searchFor.length; //Bad coding style but i didn't find any other way at that time. 
var end = document.cookie.indexOf(";", start);
if (end == -1) {
end = document.cookie.length;
}
value = document.cookie.substring(start, end);
//alert(cookieName == name);
if (value == "true") {
//if (cookieName == name) { //Not working in Firefox 
return value;
} else {
}
}
return null;
}
$(document).ready(function () {
if (ReadCookie("bReadCookiesInfo") != null) {
} else {
$('#divCookieInfo').fadeIn('slow', function () {
});
var expireDate = new Date()
expireDate.setTime(new Date().getTime() + 60 * 60 * 24 * 365 * 100) //1000 because time is in milliseconds , 100 -NO OF YEARS
setCookie("bReadCookiesInfo", true, expireDate, '');
}
});
function setCookie(name, value, expirydate, domain) {
document.cookie = name + "=" + value + ";expires=" + expirydate.toGMTString() + ";path=/;";
}
