To make life easier for ourselves, we'll write a function
that allows us to create a new cookie and set certain of its attributes with
more ease. We'll look at the code first and create an example using it
shortly.
function setCookie(cookieName, cookieValue, cookiePath, cookieExpires) { cookieValue = escape(cookieValue); if (cookieExpires == "") { var nowDate = new Date(); nowDate.setMonth(nowDate.getMonth() + 6); cookieExpires = nowDate.toGMTString(); } if (cookiePath != "") { cookiePath = ";Path=" + cookiePath; } document.cookie = cookieName + "=" + cookieValue + ";expires=" + cookieExpires + cookiePath; }
The secure and domain parts of the cookie string are unlikely to be needed,
so we just allow the name, value, expires, and path parts of a cookie to be set by the function. If we don't
want to set a path or expiration date, we just pass empty strings for those
parameters. If no path is specified, the current directory and its
subdirectories will be the path. If no expiration date is set, we just assume a
date six months from now.
The first line of the function introduces the escape() function, which we've not seen before.
cookieValue = escape(cookieValue);
When we talked about setting the value of a cookie, we mentioned
that certain characters cannot be used directly, such as a semicolon. (This also
applies to the name of the cookie.) To get around this problem, we can use the
built-in escape() and unescape() functions.
alert(escape("2001 a space odyssey;"));
We can see that the spaces have been converted to %20, % indicating that they
represent an escape or special character rather than an actual character, and
that 20 is the ASCII value of the actual character. The
semicolon has been converted to %3B, as we'd
expect.
As we'll see later, when retrieving cookie values we can use the
unescape() function to convert from the encoded version
to plain text.
Back to our function; we next have an if
statement.
if (cookieExpires == "") { var nowDate = new Date(); nowDate.setMonth(nowDate.getMonth() + 6); cookieExpires = nowDate.toGMTString(); }
This deals with the situation where an empty string, "", has been passed for the cookieExpires parameter of the function. Because most of the
time we want a cookie to last longer than the session it's created in, we set a
default value for expires that is six months after the
current date.
Next, if a value other than an empty string ("") has been passed to the function for the cookiePath parameter, we need to add that value when we
create the cookie. We simply put "path=" in front of
any value that has been passed in the cookiePath
parameter.
if (cookiePath != "") { cookiePath = ";Path=" + cookiePath; }
Finally on the last line we actually create the cookie, putting
together the cookieName, cookieValue, cookieExpires, and
cookiePath parts of the string.
document.cookie = cookieName + "=" + cookieValue + ";expires=" + cookieExpires + cookiePath;
We'll be using the setCookie() function
whenever we want to create a new cookie because it makes setting a cookie
slightly easier than having to remember all the parts we want to set. More
importantly, it can be used to set the expiration date to a date six months
ahead of the current date.
For example, to use the function and set a cookie with default
values for expires and path we
just type the following:
setCookie("cookieName","cookieValue","","")
