Show And Hide Cookie Consent Banner Using localstorage

Show And Hide Cookie Consent Banner Using localstorage
File Size: 4.76 KB
Views Total: 2975
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A simple cookie consent plugin to make your Bootstrap powered website comply with the European cookie law.

The plugin displays a bottom cookie banner to inform visitors that your site has cookies. It uses local storage to save the close status so that the cookie banner won’t redisplay until the saved value is cleared.

How to use it:

1. Load the Cookie Banner plugin's JavaScript and CSS files into your Bootstrap website. jQuery and Bootstrap JS are optional.

<!-- Bootstrap files -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Cookie Banner -->
<link rel="stylesheet" href="./src/cookie-banner.css">
<script async src="./src/cookie-banner.js"></script>

2. Add cookie consent message to the cookie banner.

<!-- Cookie Banner -->
<div class="nk-cookie-banner alert alert-dark text-center mb-0" role="alert">
  &#x1F36A; This website uses cookies to ensure you get the best experience on our website.
  <a href="/privacy/" target="blank">Learn more</a>
  <button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieBanner()">
    I Got It

3. That's it. Override the default styles of the cookie consent banner.

.nk-cookie-banner {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 999;
  border-radius: 0px;
  display: none;

This awesome jQuery plugin is developed by kolappannathan. For more Advanced Usages, please check the demo page or visit the official website.