Jquery: Manage Cookies Easily With Jquery.Cookies

Jquery.Cookie is A simple, lightweight jQuery plugin for reading, writing and deleting cookies. Let's start with it, first of all include script after the jQuery library (unless you are packaging scripts somehow else):

<script src="/path/to/jquery.cookie.js"></script>

Note:The plugin can also be loaded as AMD module.

Usage

To Create permanent session cookie use $.cookie:

$.cookie('the_cookie', 'the_value');

If you want to create temporary expiring cookie, for example 7 days from then:

$.cookie('the_cookie', 'the_value', { expires: 7 });

And to create expiring cookie, valid across entire site:

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

Now, let's read cookie by it's identification name:

$.cookie('the_cookie'); // => "the_value"
$.cookie('not_existing'); // => undefined

We can read all available cookies to:

$.cookie(); // => { "the_cookie": "the_value", "...remaining": "cookies" }

And to delete cookie:

// Returns true when cookie was found, false when no cookie was found...
$.removeCookie('the_cookie');

// Same path as when the cookie was written...
$.removeCookie('the_cookie', { path: '/' });

Note: when deleting a cookie, you must pass the exact same path, domain and secure options that were used to set the cookie, unless you're relying on the default options that is.

raw option:

By default the cookie value is encoded/decoded when writing/reading, using encodeURIComponent/decodeURIComponent. Bypass this by setting raw to true:

$.cookie.raw = true;

json option:

Turn on automatic storage of JSON objects passed as the cookie value. Assumes JSON.stringify and JSON.parse:

$.cookie.json = true;

Other Cookie Options

Cookie attributes can be set globally by setting properties of the $.cookie.defaults object or individually for each call to $.cookie() by passing a plain object to the options argument. Per-call options override the default options.

expires

expires: 365

Define lifetime of the cookie. Value can be a Number which will be interpreted as days from time of creation or a Date object. If omitted, the cookie becomes a session cookie.

path

path: '/'

Define the path where the cookie is valid. By default the path of the cookie is the path of the page where the cookie was created (standard browser behavior). If you want to make it available for instance across the entire domain use path: '/'. Default: path of page where the cookie was created.

Note regarding Internet Explorer:

Due to an obscure bug in the underlying WinINET InternetGetCookie implementation, IE's document.cookie will not return a cookie if it was set with a path attribute containing a filename.

(From Internet Explorer Cookie Internals (FAQ))

This means one cannot set a path using path: window.location.pathname in case such pathname contains a filename like so: /check.html (or at least, such cookie cannot be read correctly).

domain

domain: 'example.com'

Define the domain where the cookie is valid. Default: domain of page where the cookie was created.

secure

secure: true

If true, the cookie transmission requires a secure protocol (https). Default: false.

Enjoy!

Navigate, fork and download Jquery.Cookie in GitHub

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.