Cookies management MDB Pro component

Cookies management - Bootstrap 5 & Material Design 2.0 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.

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


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 start button to start simulate this behavior. After next click modal don't show any more until you click reset.


            <!-- 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="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </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-dismiss="modal">
                      Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Modal -->
          

            Cookie.showModalNewUser('exampleModal');
          

Show modal after next visit

If you want to display the modal to the person who will visit the page again, you can use the showModalScoring method. Enter as a parameter the information after how many visits to the website the modal should appear. Click start button 3 times to test this feature.


            <!-- 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="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </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-dismiss="modal">
                      Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Modal -->
          

            Cookie.showModalScoring('exampleModal', 3);
          

Cookies management - API


Usage

Via JavaScript


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

Methods

Name Description Example
set Set Cookie Cookie.set( ... );
get Get Cookie Cookie.get( ... );
set Remove Cookie Cookie.remove( ... );

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

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


        import { Cookie } from 'mdb-ui-kit';