Project 58, Website sections

Cookie Consent Banner

A cookie banner that does the job properly: real choices, reject is as easy as accept, and tracking scripts wait until someone says yes.

Main API: localStorage
Settings: dialog element
Dependencies: None
Your browser: Checking

See the banner

The banner shows inside the demo site below. Make a choice, open the settings, then use Reset to see it again.

Maple BakeryMenu · Order · Visit

Fresh sourdough every morning from 7am.

Scripts on this page

Saved in localStorage

How it works

Nothing loads before consentAnalytics and ad scripts are only added to the page when their category is switched on.
Save a version and dateThe choice is stored with a version number. Change your cookie list, bump the version and everyone is asked again.
Reject is one clickReject all sits next to Accept all with the same size, which is what regulators expect.

function loadIfAllowed(src, category) {
  const c = JSON.parse(localStorage.getItem("consent-v1") || "null");
  if (!c || !c.choices[category]) return;          // blocked until consent
  const s = document.createElement("script");
  s.src = src; s.async = true; document.head.append(s);
}
localStorage.setItem("consent-v1", JSON.stringify({
  version: 2, date: new Date().toISOString(),
  choices: { necessary: true, analytics: true, marketing: false }
}));