ABOUT
PORTFOLIO
SERVICES
BLOG
CONTACT

Cookie - Javascript Cookie Script

Set Cookie Javascript Function

You need to put the name and values in quotes when you call the function, like this:
Set_Cookie( 'mycookie', 'visited 9 times', 30, '/', '', '' );. Don't forget to put in empty quotes for the unused parameters or you'll get an error when you run the code. This makes the cookie named 'mycookie', with the value of 'visited 9 times', and with a life of 30 days, and the cookie is set to your root folder.

The Set_Cookie values for 'domain' and 'secure' are not utilized. Use 'domain' on the Javascript cookie if you are using it on a subdomain, like widgets.yoursite.com, where the cookie is set on the widgets subdomain, but you need it to be accessible over the whole yoursite.com domain.

It's good practice to not assume the path to the site root will be set the way you want it by default, so do this manually as a rule, '/'. If no value is set for expires, it will only last as long as the current session of the visitor, and will be automatically deleted when they close their browser.


function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );

/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );

document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}

This will set the cookie. It's the most complicated part, but actually for most purposes all you need to set are the first 4 parameters, name, value, expires, and path. If you want the cookie available only in one folder, you will need to add '/folder_name/' as a path variable, that tells the script to set the cookie for the just that path, not for the whole domain.

As a good general rule, set the path to '/', the root of your website. Generally 'domain' and 'secure' are not something you will be needing to use unless you set the cookie on a subdomain, in which case you may want to set the domain to your primary domain if you want it to be accessible from the main domain, or other subdomains.


Get Cookie Javascript Function



// this fixes an issue with the old method, ambiguous values
// with this test document.cookie.indexOf( name + "=" );
function Get_Cookie( check_name ) {
// first we'll split this cookie up into name/value pairs
// note: document.cookie only returns name=value, not the other components
var a_all_cookies = document.cookie.split( ';' );
var a_temp_cookie = '';
var cookie_name = '';
var cookie_value = '';
var b_cookie_found = false; // set boolean t/f default f

for ( i = 0; i < a_all_cookies.length; i++ )
{
// now we'll split apart each name=value pair
a_temp_cookie = a_all_cookies[i].split( '=' );


// and trim left/right whitespace while we're at it
cookie_name = a_temp_cookie[0].replace(/^s+|s+$/g, '');

// if the extracted name matches passed check_name
if ( cookie_name == check_name )
{
b_cookie_found = true;
// we need to handle case where cookie has no value but exists (no = sign, that is):
if ( a_temp_cookie.length > 1 )
{
cookie_value = unescape( a_temp_cookie[1].replace(/^s+|s+$/g, '') );
}
// note that in cases where cookie is initialized but no value, null is returned
return cookie_value;
break;
}
a_temp_cookie = null;
cookie_name = '';
}
if ( !b_cookie_found )
{
return null;
}
}

Please note that the above version fixes some fairly serious issues with
the old version, here listed below for comparison. The original utterly
fails to handle cases where cookie names are substrings of other
cookies, say like: site_main, site_main2 and so on. What's amazing to contemplate that this
original code has been up for years without anyone noticing that
weakness.


// this function gets the cookie, if it exists
// don't use this, it's weak and does not handle some cases
// correctly, this is just to maintain legacy information
function Get_Cookie( name ) {

var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) &&
( name != document.cookie.substring( 0, name.length ) ) )
{
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ";", len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}

This will retrieve the cookie by name, if the cookie does not exist, it will return false, so you can do things like if ( Get_Cookie( 'your_cookie' ) ) do something.


Delete Cookie Javascript Function



// this deletes the cookie when called
function Delete_Cookie( name, path, domain ) {
if ( Get_Cookie( name ) ) document.cookie = name + "=" +
( ( path ) ? ";path=" + path : "") +
( ( domain ) ? ";domain=" + domain : "" ) +
";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}


Here all you need to do is put in: Delete_Cookie('cookie name', '/', '') and the cookie will be deleted. Remember to match the cookie name, path, and domain to what you have it in Set_Cookie exactly, or you may get some very hard to diagnose errors.

WARNING: Do not assume the Cookie has actually been deleted during that session, both Opera and IE have in some of their browser versions maintained the cookie until you restart your browser even if you have deleted it in the script. If script functionality depends on the delete action having happened, make sure you do another Get_Cookie test on the deleted cookie to make sure it's actually deleted.


Sample Page Code for Javascript Cookies



<script type="text/javascript">
// remember, these are the possible parameters for Set_Cookie:
// name, value, expires, path, domain, secure
Set_Cookie( 'test', 'it works', '', '/', '', '' );
if ( Get_Cookie( 'test' ) ) alert( Get_Cookie('test'));
// and these are the parameters for Delete_Cookie:
// name, path, domain
// make sure you use the same parameters in Set and Delete Cookie.
Delete_Cookie('test', '/', '');
( Get_Cookie( 'test' ) ) ? alert( Get_Cookie('test')) :
alert( 'it is gone');
</script>

If you run this, what will happen is that you will get two alerts, the first one will have the content you set with Set_Cookie, the second will say 'it is gone' since you have now deleted the cookie. That's about it.
			







1 Comments
21 Apr 2010 10:55 pm
From: Arti
Thanks for your tutorials dude ! keep going :)
   Name: (required)
   Email: (required)

About This Website

This website was designed and developed by Enid Colic using HTML, CSS, PHP, jQUERY and JavaScript, handcoded in Adobe Dreamweaver.