cookie vs js-cookie vs universal-cookie vs react-cookie
JavaScript Cookie Management Libraries Comparison
1 Year
cookiejs-cookieuniversal-cookiereact-cookie
What's 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.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
cookie65,078,0241,38746.5 kB83 months agoMIT
js-cookie11,517,49322,17626.2 kB32 years agoMIT
universal-cookie1,608,04517452.9 kB144 months agoMIT
react-cookie647,14517471.2 kB144 months agoMIT
Feature Comparison: cookie vs js-cookie vs universal-cookie vs react-cookie

Environment Compatibility

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

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

  • 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

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

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

  • 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

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

  • universal-cookie:

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

  • 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

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

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

  • 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

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

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

  • 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: cookie vs js-cookie vs universal-cookie vs react-cookie
  • 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.

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

  • 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 cookie

cookie

NPM Version NPM Downloads Build Status Coverage Status

Basic HTTP cookie parser and serializer for HTTP servers.

Installation

$ npm install cookie

API

const cookie = require("cookie");
// import * as cookie from 'cookie';

cookie.parse(str, options)

Parse a HTTP Cookie header string and returning an object of all cookie name-value pairs. The str argument is the string representing a Cookie header value and options is an optional object containing additional parsing options.

const cookies = cookie.parse("foo=bar; equation=E%3Dmc%5E2");
// { foo: 'bar', equation: 'E=mc^2' }

Options

cookie.parse accepts these properties in the options object.

decode

Specifies a function that will be used to decode a cookie-value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to decode a previously-encoded cookie value into a JavaScript string.

The default function is the global decodeURIComponent, wrapped in a try..catch. If an error is thrown it will return the cookie's original value. If you provide your own encode/decode scheme you must ensure errors are appropriately handled.

cookie.serialize(name, value, options)

Serialize a cookie name-value pair into a Set-Cookie header string. The name argument is the name for the cookie, the value argument is the value to set the cookie to, and the options argument is an optional object containing additional serialization options.

const setCookie = cookie.serialize("foo", "bar");
// foo=bar

Options

cookie.serialize accepts these properties in the options object.

encode

Specifies a function that will be used to encode a cookie-value. Since value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value, and should mirror decode when parsing.

The default function is the global encodeURIComponent.

maxAge

Specifies the number (in seconds) to be the value for the Max-Age Set-Cookie attribute.

The cookie storage model specification states that if both expires and maxAge are set, then maxAge takes precedence, but it is possible not all clients by obey this, so if both are set, they should point to the same date and time.

expires

Specifies the Date object to be the value for the Expires Set-Cookie attribute. When no expiration is set clients consider this a "non-persistent cookie" and delete it the current session is over.

The cookie storage model specification states that if both expires and maxAge are set, then maxAge takes precedence, but it is possible not all clients by obey this, so if both are set, they should point to the same date and time.

domain

Specifies the value for the Domain Set-Cookie attribute. When no domain is set clients consider the cookie to apply to the current domain only.

path

Specifies the value for the Path Set-Cookie attribute. When no path is set, the path is considered the "default path".

httpOnly

Enables the HttpOnly Set-Cookie attribute. When enabled, clients will not allow client-side JavaScript to see the cookie in document.cookie.

secure

Enables the Secure Set-Cookie attribute. When enabled, clients will only send the cookie back if the browser has a HTTPS connection.

partitioned

Enables the Partitioned Set-Cookie attribute. When enabled, clients will only send the cookie back when the current domain and top-level domain matches.

This is an attribute that has not yet been fully standardized, and may change in the future. This also means clients may ignore this attribute until they understand it. More information about can be found in the proposal.

priority

Specifies the value for the Priority Set-Cookie attribute.

  • 'low' will set the Priority attribute to Low.
  • 'medium' will set the Priority attribute to Medium, the default priority when not set.
  • 'high' will set the Priority attribute to High.

More information about priority levels can be found in the specification.

sameSite

Specifies the value for the SameSite Set-Cookie attribute.

  • true will set the SameSite attribute to Strict for strict same site enforcement.
  • 'lax' will set the SameSite attribute to Lax for lax same site enforcement.
  • 'none' will set the SameSite attribute to None for an explicit cross-site cookie.
  • 'strict' will set the SameSite attribute to Strict for strict same site enforcement.

More information about enforcement levels can be found in the specification.

Example

The following example uses this module in conjunction with the Node.js core HTTP server to prompt a user for their name and display it back on future visits.

var cookie = require("cookie");
var escapeHtml = require("escape-html");
var http = require("http");
var url = require("url");

function onRequest(req, res) {
  // Parse the query string
  var query = url.parse(req.url, true, true).query;

  if (query && query.name) {
    // Set a new cookie with the name
    res.setHeader(
      "Set-Cookie",
      cookie.serialize("name", String(query.name), {
        httpOnly: true,
        maxAge: 60 * 60 * 24 * 7, // 1 week
      }),
    );

    // Redirect back after setting cookie
    res.statusCode = 302;
    res.setHeader("Location", req.headers.referer || "/");
    res.end();
    return;
  }

  // Parse the cookies on the request
  var cookies = cookie.parse(req.headers.cookie || "");

  // Get the visitor name set in the cookie
  var name = cookies.name;

  res.setHeader("Content-Type", "text/html; charset=UTF-8");

  if (name) {
    res.write("<p>Welcome back, <b>" + escapeHtml(name) + "</b>!</p>");
  } else {
    res.write("<p>Hello, new visitor!</p>");
  }

  res.write('<form method="GET">');
  res.write(
    '<input placeholder="enter your name" name="name"> <input type="submit" value="Set Name">',
  );
  res.end("</form>");
}

http.createServer(onRequest).listen(3000);

Testing

npm test

Benchmark

npm run bench
     name                   hz     min     max    mean     p75     p99    p995    p999     rme  samples
   · simple       8,566,313.09  0.0000  0.3694  0.0001  0.0001  0.0002  0.0002  0.0003  ±0.64%  4283157   fastest
   · decode       3,834,348.85  0.0001  0.2465  0.0003  0.0003  0.0003  0.0004  0.0006  ±0.38%  1917175
   · unquote      8,315,355.96  0.0000  0.3824  0.0001  0.0001  0.0002  0.0002  0.0003  ±0.72%  4157880
   · duplicates   1,944,765.97  0.0004  0.2959  0.0005  0.0005  0.0006  0.0006  0.0008  ±0.24%   972384
   · 10 cookies     675,345.67  0.0012  0.4328  0.0015  0.0015  0.0019  0.0020  0.0058  ±0.75%   337673
   · 100 cookies     61,040.71  0.0152  0.4092  0.0164  0.0160  0.0196  0.0228  0.2260  ±0.71%    30521   slowest
   ✓ parse top-sites (15) 22945ms
     name                                  hz     min     max    mean     p75     p99    p995    p999     rme   samples
   · parse accounts.google.com   7,164,349.17  0.0000  0.0929  0.0001  0.0002  0.0002  0.0002  0.0003  ±0.09%   3582184
   · parse apple.com             7,817,686.84  0.0000  0.6048  0.0001  0.0001  0.0002  0.0002  0.0003  ±1.05%   3908844
   · parse cloudflare.com        7,189,841.70  0.0000  0.0390  0.0001  0.0002  0.0002  0.0002  0.0003  ±0.06%   3594921
   · parse docs.google.com       7,051,765.61  0.0000  0.0296  0.0001  0.0002  0.0002  0.0002  0.0003  ±0.06%   3525883
   · parse drive.google.com      7,349,104.77  0.0000  0.0368  0.0001  0.0001  0.0002  0.0002  0.0003  ±0.05%   3674553
   · parse en.wikipedia.org      1,929,909.49  0.0004  0.3598  0.0005  0.0005  0.0007  0.0007  0.0012  ±0.16%    964955
   · parse linkedin.com          2,225,658.01  0.0003  0.0595  0.0004  0.0005  0.0005  0.0005  0.0006  ±0.06%   1112830
   · parse maps.google.com       4,423,511.68  0.0001  0.0942  0.0002  0.0003  0.0003  0.0003  0.0005  ±0.08%   2211756
   · parse microsoft.com         3,387,601.88  0.0002  0.0725  0.0003  0.0003  0.0004  0.0004  0.0005  ±0.09%   1693801
   · parse play.google.com       7,375,980.86  0.0000  0.1994  0.0001  0.0001  0.0002  0.0002  0.0003  ±0.12%   3687991
   · parse support.google.com    4,912,267.94  0.0001  2.8958  0.0002  0.0002  0.0003  0.0003  0.0005  ±1.28%   2456134
   · parse www.google.com        3,443,035.87  0.0002  0.2783  0.0003  0.0003  0.0004  0.0004  0.0007  ±0.51%   1721518
   · parse youtu.be              1,910,492.87  0.0004  0.3490  0.0005  0.0005  0.0007  0.0007  0.0011  ±0.46%    955247
   · parse youtube.com           1,895,082.62  0.0004  0.7454  0.0005  0.0005  0.0006  0.0007  0.0013  ±0.64%    947542   slowest
   · parse example.com          21,582,835.27  0.0000  0.1095  0.0000  0.0000  0.0001  0.0001  0.0001  ±0.13%  10791418

References

License

MIT