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

Basic example

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

Set cookie

Use the method Cookie.set() to add a cookie. You can test this method using the example below. The button will call Cookie.set('first-visit', new Date(), {expires: 1}). To use this example again, press the reset button and refresh the page.

Get cookie

If you have saved any data in the user's cookies, you can load them using the Cookie.get method.

Remove cookie

When the data saved in cookies are no longer needed and you want to delete them, use Cookie.remove method. After refreshing the page the cookie will be deleted

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.

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.

Cookies management - API

Usage

Via JavaScript

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( ... );`

JavaScript


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

Import

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

JavaScript


        import Cookie from 'mdb-cookies';