15.8 JS Cookies

What are Cookies?

• Cookies are data, stored in small text files, on your computer.
• When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.
• Cookies were invented to solve the problem "how to remember information about the user":
  • When a user visits a web page, his/her name can be stored in a cookie.
  • Next time the user visits the page, the cookie "remembers" his/her name.
• Cookies are saved in name-value pairs like:

username = John Doe

• When a browser requests a web page from a server, cookies belonging to the page are added to the request. This way the server gets the necessary data to "remember" information about users.
• None of the examples below will work if your browser has local cookies support turned off.

Create a Cookie with JavaScript

• JavaScript can create, read, and delete cookies with the document.cookie property.
• With JavaScript, a cookie can be created like this:

document.cookie = "username=John Doe";

You can also add an expiry date (in UTC time). By default, the cookie is deleted when the browser is closed:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Read a Cookie with JavaScript

With JavaScript, cookies can be read like this:

var x = document.cookie;

document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value;

Change a Cookie with JavaScript

With JavaScript, you can change a cookie the same way as you create it:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

The old cookie is overwritten.

Delete a Cookie with JavaScript

• Deleting a cookie is very simple.
• You don't have to specify a cookie value when you delete a cookie.
• Just set the expires parameter to a passed date:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

• You should define the cookie path to ensure that you delete the right cookie.
• Some browsers will not let you delete a cookie if you don't specify the path.

The Cookie String

• The document.cookie property looks like a normal text string. But it is not.
• Even if you write a whole cookie string to document.cookie, when you read it out again, you can only see the name-value pair of it.
• If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie, so if you read document.cookie again you will get something like:
• cookie1 = value; cookie2 = value;
• If you want to find the value of one specified cookie, you must write a JavaScript function that searches for the cookie value in the cookie string.

JavaScript Cookie Example

• In the example to follow, we will create a cookie that stores the name of a visitor.
• The first time a visitor arrives to the web page, he/she will be asked to fill in his/her name. The name is then stored in a cookie.
• The next time the visitor arrives at the same page, he/she will get a welcome message.
• For the example we will create 3 JavaScript functions:
  1. A function to set a cookie value
  2. A function to get a cookie value
  3. A function to check a cookie value

A Function to Set a Cookie

First, we create a function that stores the name of the visitor in a cookie variable:

Example

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Example explained:

• The parameters of the function above are the name of the cookie (cname), the value of the cookie (cvalue), and the number of days until the cookie should expire (exdays).
• The function sets a cookie by adding together the cookiename, the cookie value, and the expires string.

A Function to Get a Cookie

Then, we create a function that returns the value of a specified cookie:

Example

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

Function explained:

• Take the cookiename as parameter (cname).
• Create a variable (name) with the text to search for (cname + "=").
• Decode the cookie string, to handle cookies with special characters, e.g. '$'
• Split document.cookie on semicolons into an array called ca (ca = decodedCookie.split(';')).
• Loop through the ca array (i = 0; i < ca.length; i++), and read out each value c = ca[i]).
• If the cookie is found (c.indexOf(name) == 0), return the value of the cookie (c.substring(name.length, c.length).
• If the cookie is not found, return "".

A Function to Check a Cookie

• Last, we create the function that checks if a cookie is set.
• If the cookie is set it will display a greeting.
• If the cookie is not set, it will display a prompt box, asking for the name of the user, and stores the username cookie for 365 days, by calling the setCookie function:

Example

function checkCookie() {
  var username = getCookie("username");
  if (username != "") {
   alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
    if (username != "" && username != null) {
      setCookie("username", username, 365);
    }
  }
}