Github url

js-cookie

by js-cookie

js-cookie /js-cookie

A simple, lightweight JavaScript API for handling browser cookies

15.9K Stars 1.9K Forks Last release: 11 months ago (v2.2.1) MIT License 749 Commits 29 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

JavaScript Cookie Build Status BrowserStack Status JavaScript Style Guide Code Climate npm size jsDelivr Hits

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.

Installation

NPM

JavaScript Cookie supports npm under the name

js-cookie

.

$ npm i js-cookie

The npm package has a

module

field pointing to an ES module variant of the library, mainly to provide support for ES module aware bundlers, whereas its

browser

field points to an UMD module for full backward compatibility.

Direct download

Starting with version 3 releases are distributed with two variants of this library, an ES module as well as an UMD module.

Note the different extensions:

.mjs

denotes the ES module, whereas

.js

is the UMD one.

Example for how to load the ES module in a browser:

<script type="module" src="/path/to/js.cookie.mjs"></script><script type="module">
  import Cookies from '/path/to/js.cookie.mjs'

  Cookies.set('foo', 'bar')
</script>

Not all browsers support ES modules natively yet. For this reason the npm package/release provides both the ES and UMD module variant and you may want to include the ES module along with the UMD fallback to account for this:

<script type="module" src="/path/to/js.cookie.mjs"></script><script nomodule defer src="/path/to/js.cookie.js"></script>

Here we're loading the nomodule script in a deferred fashion, because ES modules are deferred by default. This may not be strictly necessary depending on how you're using the library.

CDN

Alternatively, include it via jsDelivr CDN:

UMD:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>

ES module:

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.mjs"></script>

ES Module

Example for how to import the ES module from another module:

import Cookies from 'js-cookie' Cookies.set('foo', 'bar')

Basic Usage

Create a cookie, valid across the entire site:

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

Create a cookie that expires 7 days from now, valid across the entire site:

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

Create an expiring cookie, valid to the path of the current page:

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

Read cookie:

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

Read all visible cookies:

Cookies.get() // =\> { name: 'value' }

Note: It is not possible to read a particular cookie by passing one of the cookie attributes (which may or may not have been used when writing the cookie in question):

Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect...!

The cookie with the name

foo

will only be available on

.get()

if it's visible from where the code is called; the domain and/or path attribute will not have an effect when reading.

Delete cookie:

Cookies.remove('name')

Delete a cookie valid to the path of the current page:

Cookies.set('name', 'value', { path: '' }) Cookies.remove('name') // fail! Cookies.remove('name', { path: '' }) // removed!

IMPORTANT! When deleting a cookie and you're not relying on the default attributes, you must pass the exact same path and domain attributes that were used to set the cookie:

Cookies.remove('name', { path: '', domain: '.yourdomain.com' })

Note: Removing a nonexistent cookie neither raises any exception nor returns any value.

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._

Encoding

Special characters that are not permitted in the cookie name (";" and "=") or cookie value (";") are encoded with their UTF-8 Hex equivalent using percent-encoding. Please note that the default encoding/decoding strategy is meant to be interoperable only between cookies that are read/written by js-cookie. To override the default encoding/decoding strategy you need to use a converter.

Cookie Attributes

Cookie attribute defaults can be set globally by creating an instance of the api via

withAttributes()

, or individually for each call to

Cookies.set(...)

by passing a plain object as the last argument. Per-call attributes override the default attributes.

expires

Define when the cookie will be removed. Value must be a [

Number

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) which will be interpreted as days from time of creation or a [

Date

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) instance. If omitted, the cookie becomes a session cookie.

To create a cookie that expires in less than a day, you can check the FAQ on the Wiki.

Default: Cookie is removed when the user closes the browser.

Examples:

Cookies.set('name', 'value', { expires: 365 }) Cookies.get('name') // =\> 'value' Cookies.remove('name')

path

A [

String

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) indicating the path where the cookie is visible.

Default:

/

Examples:

Cookies.set('name', 'value', { path: '' }) Cookies.get('name') // =\> 'value' Cookies.remove('name', { path: '' })

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

window.location.pathname

in case such pathname contains a filename like so:

/check.html

(or at least, such cookie cannot be read correctly).

In fact, you should never allow untrusted input to set the cookie attributes or you might be exposed to a XSS attack.

domain

A [

String

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) indicating a valid domain where the cookie should be visible. The cookie will also be visible to all subdomains.

Default: Cookie is visible only to the domain or subdomain of the page where the cookie was created, except for Internet Explorer (see below).

Examples:

Assuming a cookie that is being created on

site.com

:

Cookies.set('name', 'value', { domain: 'subdomain.site.com' }) Cookies.get('name') // =\> undefined (need to read at 'subdomain.site.com')

Note regarding Internet Explorer default behavior:

Q3: If I don’t specify a DOMAIN attribute (for) a cookie, IE sends it to all nested subdomains anyway?
A: Yes, a cookie set on example.com will be sent to sub2.sub1.example.com.
Internet Explorer differs from other browsers in this regard.

(From Internet Explorer Cookie Internals (FAQ))

This means that if you omit the

domain

attribute, it will be visible for a subdomain in IE.

secure

Either

true

or

false

, indicating if the cookie transmission requires a secure protocol (https).

Default: No secure protocol requirement.

Examples:

Cookies.set('name', 'value', { secure: true }) Cookies.get('name') // =\> 'value' Cookies.remove('name')

sameSite

A [

String

](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), with possible values

lax

or

strict

, prevents the browser from sending cookie along with cross-site requests.

Default: not set, i.e. include cookie in any request.

Examples:

Cookies.set('name', 'value', { sameSite: 'lax' }) Cookies.get('name') // =\> 'value' Cookies.remove('name')

Setting up defaults

const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })

Converters

Read

Create a new instance of the api that overrides the default decoding implementation. All get methods that rely in a proper decoding to work, such as

Cookies.get()

and

Cookies.get('name')

, will run the given converter for each cookie. The returned value will be used as the cookie value.

Example from reading one of the cookies that can only be decoded using the

escape

function:

document.cookie = 'escaped=%u5317' document.cookie = 'default=%E5%8C%97' var cookies = Cookies.withConverter({ read: function (value, name) { if (name === 'escaped') { return unescape(value) } // Fall back to default for all other cookies return Cookies.converter.read(value, name) } }) cookies.get('escaped') // 北 cookies.get('default') // 北 cookies.get() // { escaped: '北', default: '北' }

Write

Create a new instance of the api that overrides the default encoding implementation:

Cookies.withConverter({ write: function (value, name) { return value.toUpperCase() } })

TypeScript declarations

$ npm i @types/js-cookie

Server-side integration

Check out the Servers Docs

Contributing

Check out the Contributing Guidelines

Security

For vulnerability reports, send an e-mail to

js-cookie at googlegroups dot com

Releasing

We are using release-it for automated releasing.

Start a dry run to see what would happen:

$ npm run release minor -- --dry-run

Do a real release (publishes both to npm as well as create a new release on GitHub):

$ npm run release minor

GitHub releases are created as a draft and need to be published manually! (This is so we are able to craft suitable release notes before publishing.)

Supporters

Many thanks to BrowserStack for providing unlimited browser testing free of cost.

Authors

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.