Creating Cookies with a <META> Tag
Listing 1. Creating a Cookie that Is Valid Until a Certain Date
|
<HTML>
<HEAD> <TITLE>Creating a cookie that is valid until a certain date</TITLE> <MET HTTP-EQUIV="Set-Cookie" CONTENT="userId=678;expires=Wednesday, 26-Dec-01 16:00:00 GMT path=/"> </HEAD> <BODY> Unless you set your browser to not accept cookies, a cookie called userId with a value o 678 has been created for you. </BODY> </HTML> |
Listing 2. Creating a Cookie that Is Only Valid Until the Browser Is Closed
|
<HTML>
<HEAD> <TITLE>Creating a cookie that is valid for this session only</TITLE> <MET HTTP-EQUIV="Set-Cookie" CONTENT="ProductID=2x3;"> </HEAD> <BODY> Unless you set your browser not to accept cookies, this page creates a cookie calle ProductID with a value of "2x3". The cookie won't be written to your hard drive. It live until the browser is closed. </BODY> </HTML> |
Creating Cookies with document.cookie
On the client side, JavaScript is used to create cookies. There are several ways to do this. The easiest way is to use document.cookie. The following is the syntax for creating a cookie this way:
document.cookie = "cookieName=cookieValue [; expires=timeInGMTString] [; path=pathName] [; domain=domainName] [; secure]"
The code in Listing 3 creates a cookie called Quantity with a value of 7 that lives as long as the browser is open.
Listing 3. Creating a Cookie with document.cookie
<HTML> <HEAD> <TITLE>Creating a cookie with document.cookie</TITLE> <SCRIPT LANGUAGE="JavaScript"> document.cookie="Quantity=7"; </SCRIPT> </HEAD> <BODY> This page creates a cookie on the client side. Make sure that your browser is set to accept cookies. </BODY> </HTML> |
Writing and Reading Cookies
Listing 4. Writing and Reading Cookies
|
<HTML>
<HEAD> <TITLE>Writing and Reading Cookies</TITLE> <SCRIPT LANGUAGE="JavaScript"> function setCookie(name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } function getCookie(name) { var cName = name + "="; var dc = document.cookie; if (dc.length>0) { begin = dc.indexOf(cName); if (begin != -1) { begin += cName.length; end = dc.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin,end)); } } return null; } </SCRIPT> </HEAD> <BODY> Type in your user id, and then click the Create Cookie button. A cookie will be created for you. <BR> <FORM> User ID: <INPUT TYPE=TEXT NAME=UserID> <BR> <INPUT TYPE=BUTTON VALUE="Create Cookie" onClick='setCookie("UserID", document.forms[0].UserID.value)'> <BR> Click the Read Cookie button to display the cookie. <INPUT TYPE=BUTTON VALUE="Read Cookie" onClick='alert(getCookie("UserID"))'> </FORM> </BODY> </HTML> |
Deleting a Cookie
You don't really delete a cookie, you just make it expire by setting the expiration date to the first second of the year 1970, as in the deleteCookie function in Listing 5. Note that the function uses the getCookie function from Listing 4, so you need to paste the getCookie function in your page as well.
Listing 5. Deleting a Cookie
|
<SCRIPT LANGUAGE="JavaScript">
function deleteCookie (name, path, domain) { if (getCookie(name)) { document.cookie = name + "=" + ((path==null) ? "" : "; path=" + path) + ((domain==null) ? "" : "; domain=" + domain) + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } } function getCookie(name) { var cName = name + "="; var dc = document.cookie; if (dc.length>0) { begin = dc.indexOf(cName); if (begin != -1) { begin += cName.length; end = dc.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin,end)); } } return null; } </SCRIPT> |