Cookies management

Bootstrap 5 Cookies management plugin

This component is used to save in the browser data that we want to have access at the next user visit. For example how many times or when last time user visit our page.

Cookies management built with the latest Bootstrap 5. Options included: show modals only to new users, set a cookie, and much more.

Note: Read the API tab to find all available options and advanced customization

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

The Cookies Management Component provides methods to add, remove and get cookies.

Advanced example

Show Modal for new users

Using the showModalNewUser method you can display the modal for new users. Click the start button to start simulate this behavior. After next click modal won't show any more until you click reset.

Edit in sandbox 
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModal">This is modal for new user</h5>
        <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This model will not appear again until you press the start button and refresh the page.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal" data-mdb-ripple-init>
          Close
        </button>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
Cookie.showModalNewUser('exampleModal');

Show modal after next visit

To display the modal to a returning visitor, use the showModalScoring method. Enter, as a parameter, the number of visits after which the modal should appear. Click the start button three times to test this feature.

Edit in sandbox 
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModal">This model shows up after the third visit to the page.</h5>
        <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This model will not appear again until you press the reset button.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal" data-mdb-ripple-init>
          Close
        </button>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
Cookie.showModalScoring('exampleModal', 3);

Cookies management - API

Import

Edit in sandbox 
import Cookie from 'mdb-cookies';

Usage

Via JavaScript

Edit in sandbox 
Cookie.set('cookie-name', value, {expires: 1});

Methods

Name Description Example
set Set Cookie Cookie.set( ... );
get Get Cookie Cookie.get( ... );
remove Remove Cookie Cookie.remove( ... );
Edit in sandbox 
Cookie.set('cookie-name', value, {expires: 1});