
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.
Related Posts
Validating HTML forms using BULMA and vanilla JavaScript
Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…
A FULFILLED PROMISE - Using the FETCH API to make AJAX calls
In this article we talked about what AJAX calls are and how to use them in a traditional way, by using the XMLHttpRequest (XHR) object. In short, thanks to AJAX…
How to use Parallax.js effect on your website
Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…
How to make the website's dark mode persistent with Local Storage, CSS and JS
Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…
Dark Mode on website using CSS and JavaScript
In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…
JavaScript: Spread and Rest operators
In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…
Javascript: what are callbacks and how to use them.
Today we are going to learn about a concept that is widely used in javascript and that is used quite a lot by today's frameworks, libraries, especially NodeJS. This is…
HTTP Cookies: how they work and how to use them
Today we are going to write about the way to store data in a browser, why websites use cookies and how they work in detail. Continue reading to find out how…
The package managers npm and yarn: main differences
Npm and yarn are package managers that help to manage a project’s dependencies. A dependency is, as it sounds, something that a project depends on, a piece of code that…
The Javascript asign() method to merge and clone objects
In this article, we will be covering Object.assign()method in javascript in detail with examples. A javascript object is a collection of key-value pairs. Keys are also known as properties of object. Keys…
All the javascript functions and methods to manipulate arrays
This article will show that the prominent JavaScript array functions are .map(), .filter(), and .reduce(), and will then go through examples of instances in which .every() and .some() would save…
TypeScript: The evolution of JavaScript
When you're involved in the development of a large project, programming languages like JavaScript don't seem to be the best solution. Their lack of elements such as Language Aids has…