cookie vs js-cookie vs cookies vs cookie-parser vs universal-cookie vs react-cookie
JavaScript Cookie Management Libraries Comparison
1 Year
cookiejs-cookiecookiescookie-parseruniversal-cookiereact-cookieSimilar Packages:
What's JavaScript Cookie Management Libraries?

These libraries provide various functionalities for managing cookies in web applications. They allow developers to create, read, and delete cookies, enabling the storage of user preferences, session data, and other information in a way that persists across page reloads. Each library has its own unique features and use cases, catering to different needs in cookie management for both server-side and client-side applications.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
cookie63,275,5031,38646.5 kB83 months agoMIT
js-cookie11,333,37022,16326.2 kB42 years agoMIT
cookies3,931,0501,29322.4 kB25a year agoMIT
cookie-parser3,869,6311,98513 kB185 months agoMIT
universal-cookie1,613,32217352.9 kB144 months agoMIT
react-cookie650,87017371.2 kB144 months agoMIT
Feature Comparison: cookie vs js-cookie vs cookies vs cookie-parser vs universal-cookie vs react-cookie

Environment Compatibility

  • cookie:

    Designed for server-side use, particularly in Node.js applications, making it suitable for backend cookie management.

  • js-cookie:

    Exclusively for client-side use in browsers, providing a simple API for managing cookies in web applications.

  • cookies:

    Works in both Node.js and browser environments, providing flexibility for applications that need cookie management across different platforms.

  • cookie-parser:

    Specifically built for Express.js middleware, allowing easy integration into server-side applications that use Express.

  • universal-cookie:

    Supports both client and server environments, making it ideal for universal applications that require consistent cookie management.

  • react-cookie:

    Tailored for React applications, offering hooks and components that integrate seamlessly with React's lifecycle and state management.

API Simplicity

  • cookie:

    Offers a minimalistic API focused on parsing and serializing cookies, making it easy to use without additional features.

  • js-cookie:

    Offers a very user-friendly API that allows for easy creation, reading, and deletion of cookies with minimal configuration.

  • cookies:

    Features a simple and consistent API for cookie management, making it easy to set, get, and delete cookies across environments.

  • cookie-parser:

    Provides a straightforward middleware approach to cookie parsing, simplifying the process of accessing cookies in Express requests.

  • universal-cookie:

    Features a consistent API for both client and server usage, allowing developers to manage cookies easily regardless of the environment.

  • react-cookie:

    Provides a React-specific API that leverages hooks and context, making cookie management intuitive for React developers.

Cookie Attributes Support

  • cookie:

    Basic support for cookie attributes such as expiration and path, but requires manual handling for advanced features.

  • js-cookie:

    Comprehensive support for cookie attributes, including expiration, path, domain, and secure flags, allowing for detailed cookie management.

  • cookies:

    Supports essential cookie attributes, providing a straightforward way to set options like expiration and path.

  • cookie-parser:

    Focuses on parsing cookies rather than setting them, so it does not directly manage cookie attributes.

  • universal-cookie:

    Supports cookie attributes in a consistent manner across environments, allowing for detailed configuration of cookies.

  • react-cookie:

    Allows setting cookie attributes directly within React components, making it easy to manage cookies with specific options.

Use Case Scenarios

  • cookie:

    Best suited for backend applications that need to handle cookies without any additional dependencies or frameworks.

  • js-cookie:

    Perfect for client-side applications that need a simple and effective way to manage user preferences and session data.

  • cookies:

    Great for applications that require a unified approach to cookie management across both server and client environments.

  • cookie-parser:

    Ideal for Express.js applications where cookie parsing is necessary for handling requests and responses.

  • universal-cookie:

    Best for universal applications that need consistent cookie management across server and client environments.

  • react-cookie:

    Designed for React applications, making it easy to manage cookies in a way that aligns with React's component-based architecture.

Community and Maintenance

  • cookie:

    A well-maintained library with a focus on simplicity, making it a reliable choice for developers who need basic cookie functionality.

  • js-cookie:

    Popular in the front-end community, with regular updates and a strong user base, ensuring good support and documentation.

  • cookies:

    Maintained with a focus on cross-environment compatibility, providing ongoing support for developers needing versatile cookie management.

  • cookie-parser:

    Widely used in the Express community, ensuring good support and regular updates as part of the Express ecosystem.

  • universal-cookie:

    Well-maintained with a focus on universal applications, ensuring ongoing support and updates for developers needing consistent cookie management.

  • react-cookie:

    Actively maintained with a focus on React applications, providing regular updates and community support for React developers.

How to Choose: cookie vs js-cookie vs cookies vs cookie-parser vs universal-cookie vs react-cookie
  • cookie:

    Choose 'cookie' if you need a lightweight and straightforward solution for parsing and serializing cookies, primarily on the server-side. It is ideal for Node.js applications where you want to handle cookies without any additional overhead.

  • js-cookie:

    Use 'js-cookie' for client-side cookie management in browser applications. It offers a simple and intuitive API for creating, reading, and deleting cookies, making it ideal for front-end developers looking for ease of use and flexibility.

  • cookies:

    Select 'cookies' if you require a simple API for managing cookies in both Node.js and browser environments. It provides a unified approach to cookie management, making it suitable for applications that need to work seamlessly across different environments.

  • cookie-parser:

    Opt for 'cookie-parser' if you are using Express.js and need middleware to parse cookies from the request headers. It simplifies cookie handling in Express applications and is a good choice for server-side cookie management.

  • universal-cookie:

    Select 'universal-cookie' if you need a library that works in both client and server environments, especially in applications using React. It provides a consistent API for cookie management across different environments, making it versatile for universal applications.

  • react-cookie:

    Choose 'react-cookie' if you are building a React application and need a way to manage cookies in a React-friendly manner. It provides hooks and components for cookie management, making it easy to integrate with React's 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