Cookie Consent Banner with Local Storage

November 25, 2025

Show a small cookie consent banner at the bottom of the page and remember the visitor’s choice in localStorage. No frameworks, no external dependencies, and it only shows once per browser until they clear storage.

This is a tiny drop-in script for basic “we use cookies” notice. It’s not a full legal framework, but it covers the usual “show a banner, let them accept, then don’t nag again” pattern.

What this script does

Shows a small bar at the bottom of your site with a short cookie notice.
Stores the visitor’s decision in localStorage so the banner doesn’t reappear.
Pure HTML/CSS/JavaScript – no jQuery, no frameworks.
Easy to restyle to match your brand (colors, fonts, position).

How it works

On page load, a tiny script checks localStorage for a key like vibe_cookie_consent. If it’s not set to "accepted", the banner is shown. When the visitor clicks “Got it”, the script:

Sets localStorage.setItem('vibe_cookie_consent', 'accepted')
Fades/slides the banner out
On future page loads, the banner stays hidden

Step 1: Paste the HTML where you want the banner

Drop this just inside <body> (or at the end of your layout). It’s hidden by default until JS decides to show it.

<div id="cookie-consent-banner" class="cookie-consent">
  <div class="cookie-consent-inner">
    <span class="cookie-consent-text">
      We use cookies to personalize content and analyze traffic. By using this site, you agree to our use of cookies.
    </span>
    <button class="cookie-consent-button" type="button">
      Got it
    </button>
  </div>
</div>

You can change the text to whatever your privacy / cookie policy needs, and link to your full policy page if you have one:

<span class="cookie-consent-text">
  We use cookies to improve your experience. See our
  <a href="/privacy-policy" target="_blank" rel="noopener">privacy policy</a>.
</span>

Step 2: Add the CSS (banner style)

Put this in your main CSS file or inside a <style> block in your page’s <head>.

<style>
/* Container */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  pointer-events: none; /* disabled until we show it */
}

/* Visible state (JS toggles this class) */
.cookie-consent--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Inner bar */
.cookie-consent-inner {
  max-width: 980px;
  margin: 0 auto 12px;
  background: #111827; /* dark slate */
  color: #f9fafb;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
}

/* Text */
.cookie-consent-text {
  flex: 1;
  line-height: 1.4;
}

.cookie-consent-text a {
  color: #93c5fd; /* soft blue */
  text-decoration: underline;
}

/* Button */
.cookie-consent-button {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: #22c55e; /* green */
  color: #022c22;
  transition: background 0.15s ease-out, transform 0.1s ease-out;
}

.cookie-consent-button:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .cookie-consent-inner {
    margin: 0 8px 10px;
    border-radius: 12px;
    align-items: flex-start;
    flex-direction: column;
  }

  .cookie-consent-button {
    width: 100%;
    text-align: center;
    margin-top: 6px;
  }
}
</style>

Step 3: Add the JavaScript

Place this near the end of your page, just before </body>. It wires up the banner and remembers the click.

<script>
// VibeScriptz: cookie consent banner with localStorage
(function () {
  var STORAGE_KEY = 'vibe_cookie_consent'; // change if you like
  var banner      = document.getElementById('cookie-consent-banner');

  if (!banner) return;

  // Already accepted? Don't show it.
  try {
    if (window.localStorage && localStorage.getItem(STORAGE_KEY) === 'accepted') {
      return;
    }
  } catch (e) {
    // localStorage blocked? We'll just show the banner each time.
  }

  // Show the banner
  banner.classList.add('cookie-consent--visible');

  var button = banner.querySelector('.cookie-consent-button');
  if (!button) return;

  button.addEventListener('click', function () {
    // Store consent
    try {
      if (window.localStorage) {
        localStorage.setItem(STORAGE_KEY, 'accepted');
      }
    } catch (e) {
      // ignore
    }

    // Hide with a small animation
    banner.classList.remove('cookie-consent--visible');
  });
})();
</script>

Customizing the script

Change the text: Edit the HTML inside .cookie-consent-text.
Change colors and shape: Tweak the CSS for .cookie-consent-inner and .cookie-consent-button.
Change the storage key: Modify STORAGE_KEY if you run multiple variants.
Show on top instead of bottom: Change bottom: 0; to top: 0; in the CSS and adjust margins.

Note: This is a simple banner for “we use cookies” messaging. For strict compliance needs (GDPR/CCPA, per-category consent, blocking scripts until accept), you’ll want a more advanced setup – but this covers the common “lightweight notice + remember choice” pattern without pulling in a heavy external widget.

← Back to all scripts