cookie vs js-cookie vs react-cookie vs universal-cookie
クッキー管理ライブラリ
cookiejs-cookiereact-cookieuniversal-cookie

クッキー管理ライブラリ

クッキー管理ライブラリは、ウェブアプリケーションにおいてクッキーを簡単に操作するためのツールです。これらのライブラリは、クッキーの設定、取得、削除を簡素化し、ブラウザのクッキー機能を利用する際の複雑さを軽減します。特に、クッキーはユーザーのセッション管理や状態保持に重要な役割を果たします。

npmのダウンロードトレンド

3 年

GitHub Starsランキング

統計詳細

パッケージ
ダウンロード数
Stars
サイズ
Issues
公開日時
ライセンス
cookie01,48160.5 kB136ヶ月前MIT
js-cookie022,60026.2 kB33年前MIT
react-cookie021471.7 kB214日前MIT
universal-cookie021463.7 kB214日前MIT

機能比較: cookie vs js-cookie vs react-cookie vs universal-cookie

APIのシンプルさ

  • cookie:

    非常にシンプルなAPIを提供しており、クッキーの設定や取得が直感的に行えます。

  • js-cookie:

    簡潔で使いやすいAPIを持ち、クッキーの操作が容易です。オプションを指定することで、さまざまな設定が可能です。

  • react-cookie:

    Reactのコンポーネントとしてクッキーを管理できるため、状態管理と統合されており、Reactのライフサイクルに沿った使い方ができます。

  • universal-cookie:

    サーバーサイドとクライアントサイドの両方で一貫したAPIを提供しており、両方の環境で同じ方法でクッキーを扱えます。

ブラウザ互換性

  • cookie:

    Node.js環境での使用を前提としているため、ブラウザ互換性は考慮されていません。

  • js-cookie:

    主要なブラウザに幅広く対応しており、古いブラウザでも動作します。

  • react-cookie:

    Reactアプリケーションに特化しているため、ブラウザ互換性はjs-cookieに依存しています。

  • universal-cookie:

    サーバーサイドとクライアントサイドの両方で動作するため、ブラウザ互換性に優れています。

セッション管理

  • cookie:

    セッション管理のための基本的な機能を提供しますが、追加の機能はありません。

  • js-cookie:

    クッキーの有効期限を設定することで、セッション管理が容易になります。

  • react-cookie:

    Reactの状態管理と組み合わせることで、セッションの状態を簡単に管理できます。

  • universal-cookie:

    サーバーサイドでのセッション管理が可能で、クライアントサイドと連携して効果的なセッション管理を実現します。

ユースケース

  • cookie:

    Node.jsバックエンドでのクッキー操作に最適です。

  • js-cookie:

    フロントエンドでのクッキー操作に適しており、特にシンプルなウェブアプリケーションに向いています。

  • react-cookie:

    Reactアプリケーション内でのクッキー管理に特化しており、状態を保持するために使用されます。

  • universal-cookie:

    ユニバーサルアプリケーションにおいて、サーバーサイドとクライアントサイドでのクッキー管理を必要とする場合に最適です。

拡張性

  • cookie:

    基本的な機能のみを提供しており、拡張性は限られています。

  • js-cookie:

    シンプルなAPIにより、他のライブラリと組み合わせて使用することが容易です。

  • react-cookie:

    Reactのエコシステムに統合されており、他のReactライブラリと組み合わせて拡張可能です。

  • universal-cookie:

    サーバーサイドとクライアントサイドの両方で使用できるため、拡張性が高く、複雑なユースケースにも対応できます。

選び方: cookie vs js-cookie vs react-cookie vs universal-cookie

  • cookie:

    シンプルなクッキー操作が必要な場合や、軽量なライブラリを求めている場合に適しています。特に、Node.js環境での使用に向いています。

  • js-cookie:

    クライアントサイドでのクッキー操作を簡単に行いたい場合に最適です。シンプルなAPIを提供し、ブラウザの互換性も高いです。

  • react-cookie:

    Reactアプリケーション内でクッキーを管理したい場合に適しています。Reactのライフサイクルに統合されており、コンポーネントベースの設計にマッチします。

  • universal-cookie:

    サーバーサイドとクライアントサイドの両方でクッキーを管理する必要がある場合に最適です。ユニバーサルアプリケーションに対応しており、SSR(サーバーサイドレンダリング)を考慮した設計です。

cookie のREADME

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.parseCookie(str, options)

Parse an HTTP Cookie header string and return 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 cookieObject = cookie.parseCookie("foo=bar; equation=E%3Dmc%5E2");
// { foo: 'bar', equation: 'E=mc^2' }

Options

cookie.stringifyCookie(cookieObj, options)

Stringifies a cookie object into an HTTP Cookie header.

const cookieHeader = cookie.stringify({ a: "foo", b: "bar" });
// a=foo; b=bar

Options

cookie.parseSetCookie(str, options)

Parse an HTTP Set-Cookie header string and return an object of the options.

const setCookieObject = cookie.parseSetCookie("foo=bar; httpOnly");
// { name: "foo", value: "bar", httpOnly: true }

Note: Cookie follows the specification and ignores invalid attributes, but does not attempt to normalize or modify any attributes as a browser might. For example:

cookie.parseSetCookie(
  "session=abc; max-age=1.5; expires=invalid; custom=value; domain=example.com",
);
// { name: "session", value: "abc", domain: "example.com" }

Options

cookie.stringifySetCookie(setCookieObj, options)

Stringifies a Set-Cookie object into a Set-Cookie header string.

const setCookieHeader = cookie.stringifySetCookie({
  name: "foo",
  value: "bar",
});
// foo=bar

Options

Cookie object

The cookie object represents all cookie name-value pairs in a Cookie header, where { name: "value" } is used for name=value.

Set-Cookie object

The Set-Cookie object represents all the options in a Set-Cookie header.

name

The name of the cookie.

value

The value of a cookie after it has been decoded.

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 when 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 an 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.

Encode and decode

Cookie accepts encode or decode options for processing a cookie-value. Since the value of a cookie has a limited character set (and must be a simple string), these functions are used to transform values into strings suitable for a cookies value.

The default encode function is the global encodeURIComponent.

The default decode 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.

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.stringifySetCookie({
        name: "name",
        value: 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.parseCookie(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