Setting A Cookie via Javascript

Scripts — Javascript Cookie Script

Here’s a basic Javascript cookie script, it’s from the public domain one, unfortunately we can’t remember it’s source, if anyone knows it, we’ll add that to the script header. This code is provided as is, but has been tested extensively over the years, and should work quite well for you. If you do manage to find a bug in it, please post it in our web scripting forum.

We’ve been using this script a long time, it works fine, nothing really needs to be changed on it. Note, the way we use it, it’s set to make the cookie last in days, that can easily be changed however.

Directions on how to use the Javascript Cookie Script

Download: Javascript Cookie Script
Current Version: 1.1.2
File Last Modified: November 05, 2009. 11:31:38 am

You really don’t need much knowledge to use this script, it’s pretty much plug and play, but we’ll explain it’s main part and how to use them anyway. If you have specific questions, please post them in our Javascript Forum and we will answer them there.

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. Thanks to ThoughtfulCoder for point this problem out. 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.

Manual Downloads

If for some reason the above download links didn’t work, you can download these here:
Javascript Cookie Script

 

 

The above document can be found at “http://techpatterns.com/downloads/javascript_cookies.php“