js-cookie

What is js-cookie?

The js-cookie package is a simple, lightweight JavaScript API for handling cookies. It allows you to create, read, and delete cookies with ease. It's designed to be straightforward and easy to use, making it a popular choice for web developers looking to manage cookies in their web applications.

What are js-cookie's main functionalities?

Create a cookie

This feature allows you to create a new cookie. The first parameter is the name of the cookie, and the second parameter is the value of the cookie.

Cookies.set('name', 'value');

Read a cookie

This feature enables you to read the value of a cookie. You pass the name of the cookie you want to read as the parameter.

Cookies.get('name');

Delete a cookie

This feature allows you to delete a cookie. You simply pass the name of the cookie you wish to delete as the parameter.

Cookies.remove('name');

Set cookie with expiration

This feature lets you create a cookie that expires. The third parameter is an options object where you can set the expiration of the cookie in days.

Cookies.set('name', 'value', { expires: 7 });

Other packages similar to js-cookie

cookie

The 'cookie' package is similar to js-cookie and provides utilities for parsing and serializing cookies. It works both on the server-side and the client-side but is more verbose and less intuitive than js-cookie for client-side operations.

universal-cookie

Universal-cookie is another alternative that works both on the client and server-side, making it a good choice for universal (isomorphic) JavaScript applications. It offers a similar API to js-cookie but with additional support for server-side rendering.

README

Migrating from jquery-cookie

JavaScript Cookie 1.x internal behavior is totally backward compatible with jquery-cookie.
To start migrating from jquery-cookie to JavaScript Cookie, just rename the API accordingly:

$.cookie('name', 'value') === Cookies.set('name', 'value')
$.cookie('name') === Cookies.get('name')
$.removeCookie('name') === Cookies.remove('name')
$.cookie() === Cookies.get()

JavaScript Cookie

A simple, lightweight JavaScript API for handling cookies

If you're viewing this at https://github.com/js-cookie/js-cookie, you're reading the documentation for the master branch. View documentation for the latest release (1.5.0).

Build Status Matrix

Installation

Include the script (unless you are packaging scripts somehow else):

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

Do not include the script directly from GitHub (http://raw.github.com/...). The file is being served as text/plain and as such being blocked in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.

The plugin can also be loaded as AMD or CommonJS module.

Usage

Create session cookie:

Cookies.set('name', 'value');

Create expiring cookie, 7 days from then:

Cookies.set('name', 'value', { expires: 7 });

Create expiring cookie, valid across entire site:

Cookies.set('name', 'value', { expires: 7, path: '/' });

Read cookie:

Cookies.get('name'); // => "value"
Cookies.get('nothing'); // => undefined

Read all available cookies:

Cookies.get(); // => { "name": "value" }

Delete cookie:

// Returns true when cookie was successfully deleted, otherwise false
Cookies.remove('name'); // => true
Cookies.remove('nothing'); // => false

// Need to use the same attributes (path, domain) as what the cookie was written with
Cookies.set('name', 'value', { path: '/' });
// This won't work!
Cookies.remove('name'); // => false
// This will work!
Cookies.remove('name', { path: '/' }); // => true

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.

Namespace conflicts

If there is any danger of a conflict with the namespace Cookies, the noConflict method will allow you to define a new namespace and preserve the original one. This is especially useful when running the script on third party sites e.g. as part of a widget or SDK.

// Assign the js-cookie api to a different variable and restore the original "window.Cookies"
var Cookies2 = Cookies.noConflict();
Cookies2.set('name', 'value');

Note: The .noConflict method is not necessary when using AMD or CommonJS, thus it is not exposed in those environments.

Configuration

raw

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

Cookies.raw = true;

json

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

Cookies.json = true;

Cookie Options

Cookie attributes can be set globally by setting properties of the Cookies.defaults object or individually for each call to Cookies.set() 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.

Converters

Provide a conversion function as optional last argument for reading, in order to change the cookie's value to a different representation on the fly.

Example for parsing a value into a number:

Cookies.set('foo', '42');
Cookies.get('foo', Number); // => 42

Dealing with cookies that have been encoded using escape (3rd party cookies):

Cookies.raw = true;
Cookies.get('foo', unescape);

You can pass an arbitrary conversion function.

Contributing

Check out the Contributing Guidelines

Manual release steps

• Remove the "-pre" suffix of the "version" attribute of bower.json, package.json and component.json
• Remove the "-pre" suffix of the version number in the CHANGELOG.md and src/js.cookie.js files
• Commit with the message "Release version x.x.x"
• Create version tag in git
• Create a github release and upload the minified file
• Release on npm
• Increment and add the "-pre" suffix to the "version" attribute of bower.json, package.json and component.json
• Increment and add the "-pre" suffix to the version number in the CHANGELOG.md and src/js.cookie.js files
• Link the documentation of the latest release tag in the README.md
• Commit with the message "Prepare for the next development iteration"

Authors

Klaus Hartl