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.
Try it
Add this code before the closing <body> tag. (cdn)
<script src="https://cdn.jsdelivr.net/gh/AdrianVillamayor/Cookies-JS@1.9/src/cookies.min.js" integrity="sha256-unKQ4CGSarNaE1ZBOLWLKNBiW7Xo5MPof4+N9h4NT2Q=" crossorigin="anonymous"></script>- Create Cookie
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
Cookies.get('name') // Get value of Cookie Cookies.get() // Get all Cookies
- Check Cookie
Cookies.has('name') // Check if Cookie exist (return bool)
- Remove Cookie
Cookies.remove('name') // Remove Cookie
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.
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)When accepting or rejecting an event is generated without params
document.addEventListener("cookieAlertAccept", function (e) {
alert("All cookies accepted");
});
document.addEventListener("cookieAlertReject", function (e) {
alert("All cookies are rejected");
});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 |
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 |
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 |
configRel |
String | noopener noreferrer |
Link types |
moreinfoBtn |
Boolean | true |
true or false |
moreinfoLink |
String | http://aboutcookies.org |
Link for more related information |
moreinfoTarget |
String | _blank |
Target types |
moreinfoRel |
String | noopener noreferrer |
Link types |
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. |
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.