https://github.com/adrianvillamayor/cookies-js
CookieJs - Cookie Manager & Consent Banner/Modal in Vanilla JavaScript
https://github.com/adrianvillamayor/cookies-js
cookie cookies cookies-banner cookies-consent gdpr-compliant gdpr-consent gdpr-cookie javascript js lightweight manage-cookies modal vanilla-javascript vanilla-js
Last synced: 19 days ago
JSON representation
CookieJs - Cookie Manager & Consent Banner/Modal in Vanilla JavaScript
- Host: GitHub
- URL: https://github.com/adrianvillamayor/cookies-js
- Owner: AdrianVillamayor
- License: mit
- Created: 2021-05-03T10:26:46.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-09T14:51:36.000Z (almost 2 years ago)
- Last Synced: 2025-09-06T15:59:26.916Z (about 1 month ago)
- Topics: cookie, cookies, cookies-banner, cookies-consent, gdpr-compliant, gdpr-consent, gdpr-cookie, javascript, js, lightweight, manage-cookies, modal, vanilla-javascript, vanilla-js
- Language: JavaScript
- Homepage: https://codepen.io/adrianvillamayor/pen/jOBNPJL
- Size: 85.9 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
  
# CookieJs - Cookie Manager & Consent Banner in Vanilla JavaScript
## How it works
Simply install the code in your project.
CookieJS adds its own cookie management system and localStorage, which allows you to manage everything quickly and cleanly.
In addition, it allows you to create a 100% customizable banner, with events and checks that will allow you to comply with GDPR Compliant easily.
## Demo
Try it
[](https://codepen.io/adrianvillamayor/pen/jOBNPJL)
## Installation
Add this code before the closing `` tag. ([cdn](https://www.jsdelivr.com/package/gh/AdrianVillamayor/Cookies-JS))
```html
```
## Basic Usage
### Cookie Management
- Create Cookie
```javascript
Cookies.set('name', 'value') //Create a Cookie for the entire site
Cookies.set('name', 'value', { expires: 20 }) // Create a Cookie that expires in 20 days
- Get Cookie
```javascript
Cookies.get('name') // Get value of Cookie
Cookies.get() // Get all Cookies
```
- Check Cookie
```javascript
Cookies.has('name') // Check if Cookie exist (return bool)
```
- Remove Cookie
```javascript
Cookies.remove('name') // Remove Cookie
```
### Banner Management
With Cookies.init(), CookiesJS checks the existing cookies and localStorage creating the banner with their events in case they have not been accepted or are expired.
```javascript
var options = {
message: "We use cookies to enhance your experience.",
moreinfoLink: "cookies",
hideOnScroll: false,
type: "cookie",
bannerStyle: {
"border": "5px dashed tomato"
}
};
Cookies.init('acceptCookies', options)
```
### Events Management
When accepting or rejecting an event is generated without params
```javascript
document.addEventListener("cookieAlertAccept", function (e) {
alert("All cookies accepted");
});
document.addEventListener("cookieAlertReject", function (e) {
alert("All cookies are rejected");
});
```
## Config Cookies
Actions to manage cookies
|Action | Params | Value / Definition |
| ------------- | ------------- | ------------- |
| `set` | String `key`, String `value`, Object `attributes` | `attributes = {path: '', domain: 'example.com', expires: 20}` [Write a New Cookie](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#write_a_new_cookie)
| `get` | String `key` | If `key` is not empty, it collects the value of that cookie. Otherwise it returns all cookies |
| `has` | String `key` | Check if the cookie exists (`true` or `false`) |
| `remove` | String `key`, Object `attributes` | Delete the cookie you have set. `attributes = {path: '', domain: 'example.com', expires: 20}` [Write a New Cookie]|
| `clear` |String `cookie`| If `cookie` is empty it deletes all cookies and matching localStorage . Otherwise only the one sent. |
| `init` | String `cookie`, Object `opts` | Name for the banner cookie and the configuration and customisation options |
## Config Banner
Options allowing to modify the behavior and actions of the banner
| Parameter | Type | Default | Value / Definition |
| ------------- | ------------- | ------------- | ------------- |
| `type` | String | `cookie` | `cookie` or `localStorage` / Allows to choose how to save the user's selection |
| `expiryDays` | Float | `365` | Expressed in days (`.5` for half day.)|
| `hideOnScroll` | Boolean | `false` | `true` or `false` |
| `scrollDelay` | Int | `3000` | Expressed in milliseconds |
| `bannerTarget` | String | `cookiealert` | Class to be used for events and tracking |
| `customStyle` | Boolean | `false` | If false, it automatically generates the style of the banner and buttons. Otherwise, it generates everything without styling to avoid conflicts and overwriting. |
| `message` | String | `We use cookies to enhance your experience.` | Main text of the banner |
| `acceptBtn` | Boolean | `true` | `true` or `false` |
| `rejectBtn` | Boolean | `true` | `true` or `false` |
| `configBtn` | Boolean | `true` | `true` or `false` |
| `configLink` | String | `#` | Link to configure cookies |
| `configTarget` | String | `_blank` | [Target types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) |
| `configRel` | String | `noopener noreferrer` | [Link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
| `moreinfoBtn` | Boolean | `true` | `true` or `false` |
| `moreinfoLink` | String | `http://aboutcookies.org` | Link for more related information |
| `moreinfoTarget` | String | `_blank` | [Target types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) |
| `moreinfoRel` | String | `noopener noreferrer` | [Link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
## Customize Banner
Options for modifying the banner and button style
| Parameter | Type | Default | Value / Definition |
| ------------- | ------------- | ------------- | ------------- |
| `bannerClass` | String | `alert` | |
| `bannerStyle` | Object | `{'opacity': 1,'padding': '1.5em'}` | You can add or overwrite any element, the banner will be updated automatically. |
| `buttonGroupClass` | String | `row` | Class of the button group |
| `btnStyle` | Object | `{'padding': '.375rem .75rem', 'line-height': '1.5'}` | General style of buttons. Works exactly like `bannerStyle`. |
| `accept` | String | `Accept` | Button text |
| `acceptClass` | String | `btn btn-sm acceptcookies` | Class of accept button. Works exactly like `bannerClass`.|
| `acceptStyle` | Object | `{'background-color': '#007bff'},` | Style of accept button. Works exactly like `bannerStyle`.|
| `reject` | String | `Reject` | Button text |
| `rejectClass` | String | `btn btn-sm rejectcookies` | Class of reject button. Works exactly like `bannerClass`.|
| `rejectStyle` | Object | `{'background-color': '#007bff'},` | Style of reject button. Works exactly like `bannerStyle`.|
| `config` | String | `Reject` | Button text |
| `configClass` | String | `btn btn-sm configcookies` | Class of reject config. Works exactly like `bannerClass`.|
| `configStyle` | Object | `{'background-color': '#007bff'},` | Style of config button. Works exactly like `bannerStyle`. |
| `moreinfo` | String | `Learn more` | Button text |
| `moreinfoClass` | String | `btn btn-sm moreinfocookies` | Class of moreinfo button. Works exactly like `bannerClass`. |
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License
[MIT](https://github.com/AdrianVillamayor/Cookies-JS/blob/main/LICENSE)
### Thanks for your help! 🎉