Functions for working with cookies in JavaScript

This article contains three main functions to work with document cookies in JavaScript. The functions that you will find here are: cookieGet, cookieSet and cookieDelete. As their names suggest, they will allow you to set, get and delete current document's cookie respectively.

The first function is cookieGet:

  1. /**
  2.  * Get value from the document cookie
  3.  *
  4.  * @param string name Name of the variable to retrieve
  5.  * @return mixed
  6.  */
  7. function cookieGet(name)
  8. {
  9.     name = name + "=";
  10.     var cookies = document.cookie.split(';');
  11.  
  12.     for (var i = 0; i < cookies.length; i++) {
  13.         var c = cookies[i];
  14.         while (c.charAt(0) == ' ') {
  15.             c = c.substring(1, c.length);
  16.         }
  17.         if (c.indexOf(name) === 0) {
  18.             return c.substring(name.length, c.length);
  19.         }
  20.     }
  21.  
  22.     return null;
  23. }

The only thing you need to pass to this function is the name of the cookie entry. It returns either the value (if found) or null (if not found).

Next function allows us to set the cookie entry:

  1. /**
  2.  * Store value in the document cookie
  3.  *
  4.  * @param string name     Name of the variable to store
  5.  * @param string value    Value of the variable
  6.  * @param integer seconds Number of seconds after which the cookie will be invalid
  7.  * @param string path     Path for which the cookie will be valid
  8.  */
  9. function cookieSet(name, value, seconds, path)
  10. {
  11.     var expires = "";
  12.    
  13.     if (seconds) {
  14.         var date = new Date();
  15.         date.setTime(date.getTime() + (seconds * 1000));
  16.         expires = ";expires=" + date.toGMTString();
  17.     }
  18.  
  19.     path = ";path=" + path;
  20.  
  21.     document.cookie = name + "=" + value + expires + path;
  22. }

The function accepts four parameters - name, value, path and seconds. If name and value are self-explanatory then path and seconds need an explanation.

Php.net in setcookie function description defines path as "The path on the server in which the cookie will be available on. If set to '/', the cookie will be available within the entire domain . If set to '/foo/', the cookie will only be available within the /foo/ directory and all sub-directories such as /foo/bar/ of domain.".

seconds, on the other hand, is number of seconds after which the cookie will expire. For example, if you set it to 3600, then the specific value will not be valid after one hour (60 seconds * 60 minutes = 3600).

The last function in our list is for deleting cookie values before their expiration:

  1. /**
  2.  * Delete value from the document cookie
  3.  *
  4.  * @param string name Name of the variable to delete
  5.  */
  6. function cookieDelete(name)
  7. {
  8.     cookieSet(name, "", -1);
  9. }

As you can see, it uses our cookieSet function to set the specific entry's value to an empty one and expiration to -1. It is basically saying that entry name has expired one second ago.

Remember to include both, cookieSet and cookieDelete if you need to use cookieDelete in your code as the latter one requires the setter.

That's all for now.

Comments
No comments
Name
Email (required)
will not be published
Website
Recaptcha
you will only be required to fill it in once in this session

You can use [code][/code] tags in your comments