/Cookies-JS

CookieJs - Cookie Manager & Consent Banner/Modal in Vanilla JavaScript

Primary LanguageJavaScriptMIT LicenseMIT

Badge-glow jsDelivr hits (GitHub) GitHub repo size

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

Codepen

Installation

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>

Basic Usage

Cookie Management

  • 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

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.

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

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
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
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

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

Thanks for your help! 🎉