6fd0ef0bd5ccb87e9c6720db60150bd849f57450bcd55db879baa636c394a43eb2b27df6168e7a006e8f6414f808749c04025dd1998edc58fe72c20df69b7c 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <p align="center">
  2. <img src="https://cloud.githubusercontent.com/assets/835857/14581711/ba623018-0436-11e6-8fce-d2ccd4d379c9.gif">
  3. </p>
  4. # JavaScript Cookie [![CI](https://github.com/js-cookie/js-cookie/actions/workflows/ci.yml/badge.svg)](https://github.com/js-cookie/js-cookie/actions/workflows/ci.yml) [![BrowserStack](https://github.com/js-cookie/js-cookie/actions/workflows/browserstack.yml/badge.svg)](https://github.com/js-cookie/js-cookie/actions/workflows/browserstack.yml) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Code Climate](https://codeclimate.com/github/js-cookie/js-cookie.svg)](https://codeclimate.com/github/js-cookie/js-cookie) [![npm](https://img.shields.io/github/package-json/v/js-cookie/js-cookie)](https://www.npmjs.com/package/js-cookie) [![size](https://img.shields.io/bundlephobia/minzip/js-cookie/3)](https://www.npmjs.com/package/js-cookie) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/js-cookie/badge?style=rounded)](https://www.jsdelivr.com/package/npm/js-cookie)
  5. A simple, lightweight JavaScript API for handling cookies
  6. - Works in [all](https://www.browserstack.com/automate/public-build/b3VDaHAxVDg0NDdCRmtUOWg0SlQzK2NsRVhWTjlDQS9qdGJoak1GMzJiVT0tLVhwZHNvdGRoY284YVRrRnI3eU1JTnc9PQ==--5e88ffb3ca116001d7ef2cfb97a4128ac31174c2) browsers
  7. - Accepts [any](#encoding) character
  8. - [Heavily](test) tested
  9. - No dependency
  10. - Supports ES modules
  11. - Supports AMD/CommonJS
  12. - [RFC 6265](https://tools.ietf.org/html/rfc6265) compliant
  13. - Useful [Wiki](https://github.com/js-cookie/js-cookie/wiki)
  14. - Enable [custom encoding/decoding](#converters)
  15. - **< 800 bytes** gzipped!
  16. **👉👉 If you're viewing this at https://github.com/js-cookie/js-cookie, you're reading the documentation for the main branch.
  17. [View documentation for the latest release.](https://github.com/js-cookie/js-cookie/tree/latest#readme) 👈👈**
  18. ## Installation
  19. ### NPM
  20. JavaScript Cookie supports [npm](https://www.npmjs.com/package/js-cookie) under the name `js-cookie`.
  21. ```bash
  22. npm i js-cookie
  23. ```
  24. 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.
  25. _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:
  26. ### CDN
  27. Alternatively, include js-cookie via [jsDelivr CDN](https://www.jsdelivr.com/package/npm/js-cookie).
  28. ## Basic Usage
  29. Create a cookie, valid across the entire site:
  30. ```javascript
  31. Cookies.set('name', 'value')
  32. ```
  33. Create a cookie that expires 7 days from now, valid across the entire site:
  34. ```javascript
  35. Cookies.set('name', 'value', { expires: 7 })
  36. ```
  37. Create an expiring cookie, valid to the path of the current page:
  38. ```javascript
  39. Cookies.set('name', 'value', { expires: 7, path: '' })
  40. ```
  41. Read cookie:
  42. ```javascript
  43. Cookies.get('name') // => 'value'
  44. Cookies.get('nothing') // => undefined
  45. ```
  46. Read all visible cookies:
  47. ```javascript
  48. Cookies.get() // => { name: 'value' }
  49. ```
  50. _Note: It is not possible to read a particular cookie by passing one of the cookie attributes (which may or may not
  51. have been used when writing the cookie in question):_
  52. ```javascript
  53. Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect...!
  54. ```
  55. The cookie with the name `foo` will only be available on `.get()` if it's visible from where the
  56. code is called; the domain and/or path attribute will not have an effect when reading.
  57. Delete cookie:
  58. ```javascript
  59. Cookies.remove('name')
  60. ```
  61. Delete a cookie valid to the path of the current page:
  62. ```javascript
  63. Cookies.set('name', 'value', { path: '' })
  64. Cookies.remove('name') // fail!
  65. Cookies.remove('name', { path: '' }) // removed!
  66. ```
  67. _IMPORTANT! When deleting a cookie and you're not relying on the [default attributes](#cookie-attributes), you must pass the exact same path and domain attributes that were used to set the cookie:_
  68. ```javascript
  69. Cookies.remove('name', { path: '', domain: '.yourdomain.com' })
  70. ```
  71. _Note: Removing a nonexistent cookie neither raises any exception nor returns any value._
  72. ## Namespace conflicts
  73. 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.
  74. ```javascript
  75. // Assign the js-cookie api to a different variable and restore the original "window.Cookies"
  76. var Cookies2 = Cookies.noConflict()
  77. Cookies2.set('name', 'value')
  78. ```
  79. _Note: The `.noConflict` method is not necessary when using AMD or CommonJS, thus it is not exposed in those environments._
  80. ## Encoding
  81. This project is [RFC 6265](http://tools.ietf.org/html/rfc6265#section-4.1.1) 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](http://en.wikipedia.org/wiki/Percent-encoding).
  82. 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.
  83. Please note that the default encoding/decoding strategy is meant to be interoperable [only between cookies that are read/written by js-cookie](https://github.com/js-cookie/js-cookie/pull/200#discussion_r63270778). To override the default encoding/decoding strategy you need to use a [converter](#converters).
  84. _Note: According to [RFC 6265](https://tools.ietf.org/html/rfc6265#section-6.1), your cookies may get deleted if they are too big or there are too many cookies in the same domain, [more details here](https://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#why-are-my-cookies-being-deleted)._
  85. ## Cookie Attributes
  86. 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.
  87. ### expires
  88. Define when the cookie will be removed. Value must be a [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) which will be interpreted as days from time of creation or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) instance. If omitted, the cookie becomes a session cookie.
  89. To create a cookie that expires in less than a day, you can check the [FAQ on the Wiki](https://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#expire-cookies-in-less-than-a-day).
  90. **Default:** Cookie is removed when the user closes the browser.
  91. **Examples:**
  92. ```javascript
  93. Cookies.set('name', 'value', { expires: 365 })
  94. Cookies.get('name') // => 'value'
  95. Cookies.remove('name')
  96. ```
  97. ### path
  98. A [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) indicating the path where the cookie is visible.
  99. **Default:** `/`
  100. **Examples:**
  101. ```javascript
  102. Cookies.set('name', 'value', { path: '' })
  103. Cookies.get('name') // => 'value'
  104. Cookies.remove('name', { path: '' })
  105. ```
  106. **Note regarding Internet Explorer:**
  107. > 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.
  108. (From [Internet Explorer Cookie Internals (FAQ)](http://blogs.msdn.com/b/ieinternals/archive/2009/08/20/wininet-ie-cookie-internals-faq.aspx))
  109. 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).
  110. In fact, you should never allow untrusted input to set the cookie attributes or you might be exposed to a [XSS attack](https://github.com/js-cookie/js-cookie/issues/396).
  111. ### domain
  112. A [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) indicating a valid domain where the cookie should be visible. The cookie will also be visible to all subdomains.
  113. **Default:** Cookie is visible only to the domain or subdomain of the page where the cookie was created, except for Internet Explorer (see below).
  114. **Examples:**
  115. Assuming a cookie that is being created on `site.com`:
  116. ```javascript
  117. Cookies.set('name', 'value', { domain: 'subdomain.site.com' })
  118. Cookies.get('name') // => undefined (need to read at 'subdomain.site.com')
  119. ```
  120. **Note regarding Internet Explorer default behavior:**
  121. > Q3: If I don’t specify a DOMAIN attribute (for) a cookie, IE sends it to all nested subdomains anyway?
  122. > A: Yes, a cookie set on example.com will be sent to sub2.sub1.example.com.
  123. > Internet Explorer differs from other browsers in this regard.
  124. (From [Internet Explorer Cookie Internals (FAQ)](http://blogs.msdn.com/b/ieinternals/archive/2009/08/20/wininet-ie-cookie-internals-faq.aspx))
  125. This means that if you omit the `domain` attribute, it will be visible for a subdomain in IE.
  126. ### secure
  127. Either `true` or `false`, indicating if the cookie transmission requires a secure protocol (https).
  128. **Default:** No secure protocol requirement.
  129. **Examples:**
  130. ```javascript
  131. Cookies.set('name', 'value', { secure: true })
  132. Cookies.get('name') // => 'value'
  133. Cookies.remove('name')
  134. ```
  135. ### sameSite
  136. A [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), allowing to control whether the browser is sending a cookie along with cross-site requests.
  137. Default: not set.
  138. **Note that more recent browsers are making "Lax" the default value even without specifiying anything here.**
  139. **Examples:**
  140. ```javascript
  141. Cookies.set('name', 'value', { sameSite: 'strict' })
  142. Cookies.get('name') // => 'value'
  143. Cookies.remove('name')
  144. ```
  145. ### Setting up defaults
  146. ```javascript
  147. const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })
  148. ```
  149. ## Converters
  150. ### Read
  151. 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.
  152. Example from reading one of the cookies that can only be decoded using the `escape` function:
  153. ```javascript
  154. document.cookie = 'escaped=%u5317'
  155. document.cookie = 'default=%E5%8C%97'
  156. var cookies = Cookies.withConverter({
  157. read: function (value, name) {
  158. if (name === 'escaped') {
  159. return unescape(value)
  160. }
  161. // Fall back to default for all other cookies
  162. return Cookies.converter.read(value, name)
  163. }
  164. })
  165. cookies.get('escaped') // 北
  166. cookies.get('default') // 北
  167. cookies.get() // { escaped: '北', default: '北' }
  168. ```
  169. ### Write
  170. Create a new instance of the api that overrides the default encoding implementation:
  171. ```javascript
  172. Cookies.withConverter({
  173. write: function (value, name) {
  174. return value.toUpperCase()
  175. }
  176. })
  177. ```
  178. ## TypeScript declarations
  179. ```bash
  180. npm i @types/js-cookie
  181. ```
  182. ## Server-side integration
  183. Check out the [Servers Docs](SERVER_SIDE.md)
  184. ## Contributing
  185. Check out the [Contributing Guidelines](CONTRIBUTING.md)
  186. ## Security
  187. For vulnerability reports, send an e-mail to `js-cookie at googlegroups dot com`
  188. ## Releasing
  189. Releasing should be done via the `Release` GitHub Actions workflow, so that published packages on npmjs.com have package provenance.
  190. GitHub releases are created as a draft and need to be published manually!
  191. (This is so we are able to craft suitable release notes before publishing.)
  192. ## Supporters
  193. <p>
  194. <a href="https://www.browserstack.com/"><img src="https://raw.githubusercontent.com/wiki/js-cookie/js-cookie/Browserstack-logo%402x.png" width="150"></a>
  195. </p>
  196. Many thanks to [BrowserStack](https://www.browserstack.com/) for providing unlimited browser testing free of cost.
  197. ## Authors
  198. - [Klaus Hartl](https://github.com/carhartl)
  199. - [Fagner Brack](https://github.com/FagnerMartinsBrack)
  200. - And awesome [contributors](https://github.com/js-cookie/js-cookie/graphs/contributors)