Skip to content
Get packs

Guide · Open source

How to use js-cookie: set, read and delete cookies

Updated · written with AI from the project's own documentation and checked against our catalogue data

js-cookie is a small JavaScript library that lets a web page set, read and delete browser cookies with simple function calls, instead of working with the raw document.cookie string. This guide covers installation, the basic set, get and remove calls, and the cookie attributes you are most likely to need. By the end you will know how to store a small value in a cookie and how to delete it correctly.

JavaScript Cookiejs-cookie/js-cookie · ★ 22.6k · MIT

Quick start

  1. 1Install the package. Run npm i js-cookie in your project folder.
  2. 2Import the library. Use import Cookies from 'js-cookie' or require('js-cookie') depending on your module system.
  3. 3Set a cookie. Call Cookies.set with a name and value, adding an options object for expires, path or secure if needed.
  4. 4Read a cookie. Call Cookies.get with the cookie name; it returns undefined if the cookie does not exist.
  5. 5Delete a cookie. Call Cookies.remove, passing the same path, domain, secure and sameSite attributes used when the cookie was set.

Install js-cookie with npm

The README's install method is npm. Run the command below in your project folder to add the package.

  • The npm package has a module field pointing to an ES module build for bundlers, and a browser field pointing to a UMD build for backward compatibility.
  • If you need to support browsers without native ES module support, the README suggests including the ES module along with the UMD fallback.
  • The README also describes a CDN option through jsDelivr.
npm i js-cookie

Import js-cookie in your code

Import the library with either ES module syntax or CommonJS, depending on your setup. Both forms give you the same Cookies object.

import Cookies from 'js-cookie' // or const Cookies = require('js-cookie')

Set, read and delete a cookie

Calling Cookies.set with a name and a value creates a cookie that is valid across the entire site. Cookies.get returns the value, or undefined if the cookie does not exist. Cookies.get with no arguments returns all cookies visible to the page.

Cookies.remove deletes a cookie. Removing a cookie that does not exist neither raises an exception nor returns a value.

  • Cookies.get('nothing') returns undefined when no such cookie exists.
  • Cookies.get() returns an object of all visible cookies.
Cookies.set('name', 'value') Cookies.get('name') // => 'value' Cookies.get('nothing') // => undefined Cookies.get() // => { name: 'value' } Cookies.remove('name')

Set an expiry date

The expires attribute takes a Number, interpreted as days from creation, or a Date instance. If you omit it, the cookie becomes a session cookie. By default the cookie is removed when the user closes the browser.

  • Pass a number such as 7 to expire the cookie seven days from now.
  • Pass a Date instance for an exact expiry time.
  • The README points to a wiki FAQ for cookies that expire in less than a day.
Cookies.set('name', 'value', { expires: 7 })

Use path, domain and secure attributes

The path attribute sets where the cookie is visible and defaults to /. The domain attribute makes the cookie visible to a domain and its subdomains; by default it is visible only to the domain or subdomain of the page that created it. The secure attribute, when true, requires the cookie to be sent over https.

Attributes can be set for every call with Cookies.withAttributes(), or per call by passing a plain object as the last argument. Per-call attributes override the defaults.

  • Reading a cookie ignores the domain and path attributes, so you cannot target a cookie by them on get.
  • Never let untrusted input set cookie attributes, as the README warns this can expose you to XSS.
Cookies.set('name', 'value', { expires: 365, secure: true })

Delete a cookie correctly

When you delete a cookie and rely on non-default attributes, you must pass the exact same path, domain, secure and sameSite values that were used to set it. Otherwise the removal fails silently.

  • Set a cookie with path '' and remove it with the same path, or the removal will not work.
  • Passing matching attributes to remove is the fix the README gives for failed deletions.
Cookies.set('name', 'value', { path: '' }) Cookies.remove('name') // fail! Cookies.remove('name', { path: '' }) // removed!

What people use it for

  • Remembering a small user preference, such as a display setting, across page visits.
  • Storing a short identifier in a cookie on a website so later pages can read it.
  • Adding a cookie to a third-party widget or SDK, using noConflict to avoid clashing with an existing Cookies variable.
  • Using one cookie helper across a project that mixes ES module bundles and older script-tag pages.

Frequently asked questions

Is js-cookie free to use?

js-cookie is released under the MIT licence, as listed in the repository. Check the licence file in the repository for the full terms before using it in a commercial project.

Does js-cookie have any dependencies?

The README says js-cookie has no dependencies and is under 800 bytes gzipped. It is described as a small client-side library.

How do I install js-cookie?

Run npm i js-cookie in your project. The README also mentions loading it from the jsDelivr CDN as an alternative.

Why is my cookie not being deleted?

Removal needs the same path, domain, secure and sameSite attributes that were used when setting the cookie. Removing a nonexistent cookie does nothing and throws no error.

Can js-cookie store large amounts of data?

No. The README notes that browsers may delete cookies that are too big or too numerous, so keep stored values small.

How is js-cookie different from document.cookie?

document.cookie is the browser's built-in raw string interface. js-cookie wraps it in simple set, get and remove calls and handles encoding and attributes for you. Other options named in comparisons include universal-cookie and the cookie npm package.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

js-cookie suits front-end developers who need to store small values in browser cookies and want a tiny, dependency-free helper that works with both ES module and older script setups. It is not a fit for large data, server-side cookie handling, or cases where you need to read a cookie by its domain or path.

Install options & downloads