universal-cookie vs cookie vs js-cookie vs react-cookie
JavaScript Cookie Management Libraries
Search packages..
universal-cookiecookiejs-cookiereact-cookie

JavaScript Cookie Management Libraries

Cookie management libraries in JavaScript provide developers with utilities to create, read, and manage cookies in web applications. These libraries simplify the process of handling cookies, which are essential for maintaining user sessions, preferences, and tracking user behavior. Each library has its unique features and use cases, catering to different frameworks and environments, making it crucial for developers to choose the right one based on their specific needs and project requirements.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
universal-cookie1,221,58121563.7 kB44 months agoMIT
cookie01,53360.8 kB122 months agoMIT
js-cookie022,58725.9 kB113 months agoMIT
react-cookie021571.7 kB44 months agoMIT

Feature Comparison: universal-cookie vs cookie vs js-cookie vs react-cookie

Environment Compatibility

  • universal-cookie:

    As the name suggests, 'universal-cookie' works in both client and server environments, making it versatile for applications that require cookie management in both contexts.

  • cookie:

    Designed primarily for Node.js, 'cookie' is not intended for browser use, making it suitable for server-side applications where cookie parsing and serialization are needed.

  • js-cookie:

    A client-side library, 'js-cookie' is optimized for use in web browsers, providing a simple API for cookie management directly in the browser environment.

  • react-cookie:

    Tailored for React applications, 'react-cookie' allows for cookie management within React's component lifecycle, making it ideal for React developers.

API Simplicity

  • universal-cookie:

    'universal-cookie' offers a comprehensive API that supports both client and server-side cookie management, allowing for a consistent approach across different environments.

  • cookie:

    The 'cookie' library offers a minimalistic API focused on parsing and serializing cookies, making it straightforward but limited in functionality compared to others.

  • js-cookie:

    'js-cookie' provides a very user-friendly API with methods for setting, getting, and deleting cookies, making it easy for developers to manage cookies without much overhead.

  • react-cookie:

    'react-cookie' integrates cookie management into React's context and hooks, providing a more complex API that leverages React's features for state management and lifecycle methods.

Dependencies

  • universal-cookie:

    This package also requires React if used in a React application, but it can function independently in a Node.js environment.

  • cookie:

    This package has no dependencies, making it lightweight and easy to integrate into any Node.js application without worrying about additional libraries.

  • js-cookie:

    Also a standalone library with no dependencies, 'js-cookie' is lightweight and can be easily added to any web project without bloat.

  • react-cookie:

    Requires React as a dependency since it is built specifically for React applications, which may add some complexity if you're not already using React.

Use Cases

  • universal-cookie:

    Great for applications that need to manage cookies both on the client and server sides, particularly in isomorphic or server-rendered React applications.

  • cookie:

    Best suited for server-side applications needing cookie management without the overhead of a full library, such as in API development.

  • js-cookie:

    Ideal for client-side applications where simple cookie management is required, such as tracking user preferences or session data.

  • react-cookie:

    Perfect for React applications that need to manage cookies in a way that integrates seamlessly with the React component lifecycle and state management.

Community and Support

  • universal-cookie:

    Also enjoys a good level of community support, particularly among developers who need a versatile cookie management solution for both client and server.

  • cookie:

    Being a low-level utility, it has a smaller community and less frequent updates compared to more comprehensive libraries.

  • js-cookie:

    Has a larger community and is widely used, resulting in better support and more resources available for troubleshooting and learning.

  • react-cookie:

    As part of the React ecosystem, it benefits from a strong community and regular updates, making it a reliable choice for React developers.

How to Choose: universal-cookie vs cookie vs js-cookie vs react-cookie

  • universal-cookie:

    Use 'universal-cookie' when you need a solution that works in both client-side and server-side environments, particularly with React. It provides a consistent API for managing cookies across different platforms.

  • cookie:

    Choose 'cookie' for a lightweight, no-dependency solution that is ideal for Node.js environments where you need to parse and serialize cookies without any additional overhead.

  • js-cookie:

    Opt for 'js-cookie' if you need a simple, straightforward API for managing cookies in the browser. It's lightweight and easy to use, making it suitable for client-side applications without complex requirements.

  • react-cookie:

    Select 'react-cookie' if you are building a React application and require a way to manage cookies with React's context and hooks. This package integrates seamlessly with React's lifecycle and state management.

README for universal-cookie

universal-cookie

Universal cookies for JavaScript

Integrations

Getting started

npm install universal-cookie

or in the browser (global variable UniversalCookie):

<script
  crossorigin
  src="https://unpkg.com/universal-cookie@7/umd/universalCookie.min.js"
></script>

API - Cookies class

constructor([cookieHeader], [defaultSetOptions])

Create a cookies context

  • cookieHeader (string|object): specify the cookie header or object
  • defaultSetOptions (object): specify the default options when setting cookies
    • path (string): cookie path, use / as the path if you want your cookie to be accessible on all pages
    • expires (Date): absolute expiration date for the cookie
    • maxAge (number): relative max age of the cookie from when the client receives it in seconds
    • domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
    • secure (boolean): Is only accessible through HTTPS?
    • httpOnly (boolean): Is only the server can access the cookie? Note: You cannot get or set httpOnly cookies from the browser, only the server.
    • sameSite (boolean|none|lax|strict): Strict or Lax enforcement
    • partitioned (boolean): Indicates that the cookie should be stored using partitioned storage

get(name, [options])

Get a cookie value

  • name (string): cookie name
  • options (object):
    • doNotParse (boolean): do not convert the cookie into an object no matter what

getAll([options])

Get all cookies

  • options (object):
    • doNotParse (boolean): do not convert the cookie into an object no matter what

set(name, value, [options])

Set a cookie value

  • name (string): cookie name
  • value (string|object): save the value and stringify the object if needed
  • options (object): Support all the cookie options from RFC 6265
    • path (string): cookie path, use / as the path if you want your cookie to be accessible on all pages
    • expires (Date): absolute expiration date for the cookie
    • maxAge (number): relative max age of the cookie from when the client receives it in seconds
    • domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
    • secure (boolean): Is only accessible through HTTPS?
    • httpOnly (boolean): Is only the server can access the cookie? Note: You cannot get or set httpOnly cookies from the browser, only the server.
    • sameSite (boolean|none|lax|strict): Strict or Lax enforcement
    • partitioned (boolean): Indicates that the cookie should be stored using partitioned storage

remove(name, [options])

Remove a cookie

  • name (string): cookie name
  • options (object): Support all the cookie options from RFC 6265
    • path (string): cookie path, use / as the path if you want your cookie to be accessible on all pages
    • expires (Date): absolute expiration date for the cookie
    • maxAge (number): relative max age of the cookie from when the client receives it in seconds
    • domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
    • secure (boolean): Is only accessible through HTTPS?
    • httpOnly (boolean): Is only the server can access the cookie? Note: You cannot get or set httpOnly cookies from the browser, only the server.
    • sameSite (boolean|none|lax|strict): Strict or Lax enforcement
    • partitioned (boolean): Indicates that the cookie should be stored using partitioned storage

addChangeListener(callback)

Add a listener to when a cookie is set or removed.

  • callback (function): Call that will be called with the first argument containing name, value and options of the changed cookie.

removeChangeListener(callback)

Remove a listener from the change callback.

removeAllChangeListeners()

Remove all change listeners that were previously added with addChangeListener().

update()

Read back the cookies from the browser and triggers the change listeners. This should normally not be necessary because this library detects cookie changes automatically.

Browser Example

import Cookies from 'universal-cookie';

const cookies = new Cookies(null, { path: '/' });

cookies.set('myCat', 'Pacman');
console.log(cookies.get('myCat')); // Pacman

Server Example

import Cookies from 'universal-cookie';

const cookies = new Cookies(req.headers.cookie, { path: '/' });

console.log(cookies.get('myCat')); // Pacman or undefined if not set yet
npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.