クッキー管理ライブラリは、ウェブアプリケーションでクッキーを簡単に操作するためのツールです。これらのライブラリは、クッキーの作成、読み取り、削除を簡素化し、ブラウザのストレージ機能を利用して、ユーザーのセッションや設定を管理します。これにより、開発者はクッキーの操作に関する複雑さを軽減し、より効率的にアプリケーションを構築できます。
js-cookieは、非常にシンプルで直感的なAPIを提供します。クッキーの設定、取得、削除が簡単に行え、特別な設定なしで即座に使用できます。
universal-cookieは、クッキーの操作に関してもシンプルなAPIを提供しますが、サーバーサイドとクライアントサイドの両方で動作するため、少し複雑さが増します。
react-cookieもシンプルなAPIを提供していますが、Reactのコンポーネントとしてクッキーを管理するため、Reactの知識が必要です。特に、Hooksやコンテキストを利用することで、クッキーの状態を簡単に管理できます。
js-cookieは、シンプルで軽量なクッキー管理を必要とする場合に最適です。特に、Reactや他のフレームワークに依存せず、純粋なJavaScriptで動作するため、どんなプロジェクトでも使用できます。
universal-cookieは、サーバーサイドとクライアントサイドの両方でクッキーを管理する必要がある場合に適しています。特に、Next.jsなどのサーバーサイドレンダリングを使用するアプリケーションでの使用が推奨されます。
react-cookieは、Reactアプリケーションに特化しており、Reactのコンポーネントライフサイクルに統合されたクッキー管理が必要な場合に選択すべきです。特に、ReactのコンテキストAPIを利用して、クッキーの状態を簡単に管理できます。
A simple, lightweight JavaScript API for handling cookies
👉👉 If you're viewing this at https://github.com/js-cookie/js-cookie, you're reading the documentation for the main branch. View documentation for the latest release. 👈👈
JavaScript Cookie supports npm under the name js-cookie.
npm i js-cookie
The npm package has a module field pointing to an ES module variant of the library, mainly to provide support for ES module aware bundlers, whereas its browser field points to an UMD module for full backward compatibility.
Not all browsers support ES modules natively yet. For this reason the npm package/release provides both the ES and UMD module variant and you may want to include the ES module along with the UMD fallback to account for this:
Alternatively, include js-cookie via jsDelivr CDN.
Create a cookie, valid across the entire site:
Cookies.set('name', 'value')
Create a cookie that expires 7 days from now, valid across the entire site:
Cookies.set('name', 'value', { expires: 7 })
Create an expiring cookie, valid to the path of the current page:
Cookies.set('name', 'value', { expires: 7, path: '' })
Read cookie:
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
Read all visible cookies:
Cookies.get() // => { name: 'value' }
Note: It is not possible to read a particular cookie by passing one of the cookie attributes (which may or may not have been used when writing the cookie in question):
Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect...!
The cookie with the name foo will only be available on .get() if it's visible from where the
code is called; the domain and/or path attribute will not have an effect when reading.
Delete cookie:
Cookies.remove('name')
Delete a cookie valid to the path of the current page:
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!
IMPORTANT! When deleting a cookie and you're not relying on the default attributes, you must pass the exact same path and domain attributes that were used to set the cookie:
Cookies.remove('name', { path: '', domain: '.yourdomain.com' })
Note: Removing a nonexistent cookie neither raises any exception nor returns any value.
If there is any danger of a conflict with the namespace Cookies, the noConflict method will allow you to define a new namespace and preserve the original one. This is especially useful when running the script on third party sites e.g. as part of a widget or SDK.
// Assign the js-cookie api to a different variable and restore the original "window.Cookies"
var Cookies2 = Cookies.noConflict()
Cookies2.set('name', 'value')
Note: The .noConflict method is not necessary when using AMD or CommonJS, thus it is not exposed in those environments.
This project is RFC 6265 compliant. All special characters that are not allowed in the cookie-name or cookie-value are encoded with each one's UTF-8 Hex equivalent using percent-encoding.
The only character in cookie-name or cookie-value that is allowed and still encoded is the percent % character, it is escaped in order to interpret percent input as literal.
Please note that the default encoding/decoding strategy is meant to be interoperable only between cookies that are read/written by js-cookie. To override the default encoding/decoding strategy you need to use a converter.
Note: According to RFC 6265, your cookies may get deleted if they are too big or there are too many cookies in the same domain, more details here.
Cookie attribute defaults can be set globally by creating an instance of the api via withAttributes(), or individually for each call to Cookies.set(...) by passing a plain object as the last argument. Per-call attributes override the default attributes.
Define when the cookie will be removed. Value must be a Number which will be interpreted as days from time of creation or a Date instance. If omitted, the cookie becomes a session cookie.
To create a cookie that expires in less than a day, you can check the FAQ on the Wiki.
Default: Cookie is removed when the user closes the browser.
Examples:
Cookies.set('name', 'value', { expires: 365 })
Cookies.get('name') // => 'value'
Cookies.remove('name')
A String indicating the path where the cookie is visible.
Default: /
Examples:
Cookies.set('name', 'value', { path: '' })
Cookies.get('name') // => 'value'
Cookies.remove('name', { path: '' })
Note regarding Internet Explorer:
Due to an obscure bug in the underlying WinINET InternetGetCookie implementation, IE’s document.cookie will not return a cookie if it was set with a path attribute containing a filename.
(From Internet Explorer Cookie Internals (FAQ))
This means one cannot set a path using window.location.pathname in case such pathname contains a filename like so: /check.html (or at least, such cookie cannot be read correctly).
In fact, you should never allow untrusted input to set the cookie attributes or you might be exposed to a XSS attack.
A String indicating a valid domain where the cookie should be visible. The cookie will also be visible to all subdomains.
Default: Cookie is visible only to the domain or subdomain of the page where the cookie was created, except for Internet Explorer (see below).
Examples:
Assuming a cookie that is being created on site.com:
Cookies.set('name', 'value', { domain: 'subdomain.site.com' })
Cookies.get('name') // => undefined (need to read at 'subdomain.site.com')
Note regarding Internet Explorer default behavior:
Q3: If I don’t specify a DOMAIN attribute (for) a cookie, IE sends it to all nested subdomains anyway?
A: Yes, a cookie set on example.com will be sent to sub2.sub1.example.com.
Internet Explorer differs from other browsers in this regard.
(From Internet Explorer Cookie Internals (FAQ))
This means that if you omit the domain attribute, it will be visible for a subdomain in IE.
Either true or false, indicating if the cookie transmission requires a secure protocol (https).
Default: No secure protocol requirement.
Examples:
Cookies.set('name', 'value', { secure: true })
Cookies.get('name') // => 'value'
Cookies.remove('name')
A String, allowing to control whether the browser is sending a cookie along with cross-site requests.
Default: not set.
Note that more recent browsers are making "Lax" the default value even without specifiying anything here.
Examples:
Cookies.set('name', 'value', { sameSite: 'strict' })
Cookies.get('name') // => 'value'
Cookies.remove('name')
const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })
Create a new instance of the api that overrides the default decoding implementation. All get methods that rely in a proper decoding to work, such as Cookies.get() and Cookies.get('name'), will run the given converter for each cookie. The returned value will be used as the cookie value.
Example from reading one of the cookies that can only be decoded using the escape function:
document.cookie = 'escaped=%u5317'
document.cookie = 'default=%E5%8C%97'
var cookies = Cookies.withConverter({
read: function (value, name) {
if (name === 'escaped') {
return unescape(value)
}
// Fall back to default for all other cookies
return Cookies.converter.read(value, name)
}
})
cookies.get('escaped') // 北
cookies.get('default') // 北
cookies.get() // { escaped: '北', default: '北' }
Create a new instance of the api that overrides the default encoding implementation:
Cookies.withConverter({
write: function (value, name) {
return value.toUpperCase()
}
})
npm i @types/js-cookie
Check out the Servers Docs
Check out the Contributing Guidelines
For vulnerability reports, send an e-mail to js-cookie at googlegroups dot com
Releasing should be done via the Release GitHub Actions workflow, so that published packages on npmjs.com have package provenance.
GitHub releases are created as a draft and need to be published manually! (This is so we are able to craft suitable release notes before publishing.)
Many thanks to BrowserStack for providing unlimited browser testing free of cost.