1. Javascript intro
  2. Javascript basics
  3. Javascript variables
  4. Javascript functions
  5. Javascript popup boxes
  6. Javascript conditions
  7. Javascript loops
  8. Javascript arrays
  9. Javascript objects
  10. Javascript strings
  11. Javascript events
  12. Javascript errors
  13. Javascript DOM
  14. Javascript elements
  15. Javascript new windows
  16. Javascript date & time
  17. Javascript cookies
  18. Javascript print
  19. Javascript redirect
  20. Javascript void
  21. Javascript summary

Javascript cookies

With Javascript, you can read and write cookies.

This tutorial focuses on:

What is a cookie?

In popular usage, a cookie is a sweet confection that comes in many varieties. In computer terms, 'cookie' means something vastly different than that.

In computer usage, a cookie is a small text file that a web server may store on a user's computer for the purpose of uniquely identifying the user during future visits to the website.

Writing cookies

You can write cookies using the cookie property of the document object.

A cooke can contain four parameters:

Syntax for writing a cookie:
document.cookie="nameOfCookie=cookieValue;expires=expirationDate;path=URL; domain=theDomain;"
<script type="text/javascript"> var d = new Date(); //add five days to the d Date object d.setDate(d.getDate() + 5); //set the cookie //the toGMTString() function is used to convert the date into a String document.cookie="aCookie=this is a cookie;expires=" + d.toGMTString(); </script>

In the above example, a cookie named "aCookie" is created that contains the value "this is a cookie" and it is set to expire five days after it is created.

Reading cookies

To read a cookie, you should first check if cookies are set using the length property.

<script type="text/javascript> if(document.cookie.length > 0){ alert("Cookies have been set"); } else{ alert("No cookies have been set"); } </script>

If there are cookies set, you can read them using the indexOf() function. The indexOf() function is used to return the position of the first occurence of a string within another string.

var aFruit = new String("Strawberry"); //search for the string "Straw" within the aFruit string and print its position document.write(aFruit.indexOf("Straw")); //skip a line document.write("<br />"); //search for the string "rasp" within the aFruit string and print its position document.write(aFruit.indexOf("rasp"));
0 -1

Whenever a string is not found within another string using the indexOf() function it will return -1.

You can apply this to reading cookies by searching through the document.cookie property for a specified cookie.

<script type="text/javascript> if(document.cookie.indexOf("aCookie") == -1){ alert("There is no cookie by the name of aCookie"); } else{ alert("The aCookie cookie is set!"); } </script>

In the above example we are checking if a cookie named aCookie is set by searching for the string "aCookie" within the document.cookie property. If it returns -1, then the aCookie cookie is not set, otherwise it is.

If the cookie is set, you can now read it:
<script type="text/javascript> var cookieStart, cookieEnd, cookieValue; //check if cookies are set if (document.cookie.length > 0){ //start reading from the point //where the aCookie cookie is set cookieStart = document.cookie.indexOf("aCookie="); //if the aCookie cookie is set if (cookieStart != -1){ /* the starting point for reading the cookie should be from the point where aCookie is set + the length of the string "aCookie" this way, only the value of the cookie is read and not the cookie name the ending point of the cookie is set as the first semicolon after the starting point to ensure that only the value of the cookie is read */ cookieStart = cookieStart + "aCookie=".length; cookieEnd = document.cookie.indexOf(";", cookieStart); //if there is no occurence of the semicolon character //cookieEnd takes the length of the document.cookie property if (cookieEnd == -1) cookieEnd = document.cookie.length; //cookieValue is set as all //the data between cookieStart and cookieEnd cookieValue = document.cookie.substring(cookieStart, cookieEnd); //print the name of the cookie along with its value document.write("aCookie = " + cookieValue); } } </script>
aCookie = this is a cookie
© Copyright 2013-2014
Terms of use | Privacy policy | Copyright information