Storage management

Bootstrap 5 Storage management plugin

Storage component allows you to manage data stored in the browser's memory. Thanks to the component, you can easily add, delete, get data and check their expiration time.

Storage management in the latest Bootstrap 5. Manage data stored in the browser memory. Thanks to the component, you can add, delete, get data and check their end time.

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 Storage Management plugin provides methods to add, remove and get storage data.

Set Storage

Use the method Storage.set() to add data to storage. You can test this method using the example below. The button will call Storage.set('date', new Date());. To use this example again, press the reset button.

Edit in sandbox 
        
            
            Storage.set('date', new Date());

Set the expiration time

You can set the expiration time (in days) for saved data in local storage.

Edit in sandbox 
        
            
            Storage.set('date', new Date(), 1);

Get storage

If you have saved any data in the storage, you can retrieve it using the Storage.get method.

Edit in sandbox 
        
            
            Storage.get('name');

Remove Storage

When the data saved in storage are no longer needed and you want to delete them, use Storage.remove method.

Edit in sandbox 
        
            
            Storage.remove('name');

Check Storage

You can set a task to check if the data has expired, delete it, and set a callback function. Set data name, the interval (in minutes) on how often to check the expiration date, and callback function.

Edit in sandbox 
        
            
            Storage.check('name', 0.5, () => {
              // do something
            });

Advanced example

Show Modal for new users

Using the showModalNewUser method you can display the modal for new users. Click the start button to simulate this behavior. After the next click, the modal won't show anymore 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 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 -->
          
        
    
        
            
            Storage.showModalNewUser('exampleModal');

Show modal after next visit

If you want to display the modal to returning visitors, you can use the showModalScoring method. Provide the information on how many visits to the website should occur before the modal appears as a parameter. 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 -->
          
        
    
        
            
            Storage.showModalScoring('exampleModal', 3);

Storage management - API

Import

Edit in sandbox 
        
            
          import Storage from 'mdb-storage';

Usage

Via JavaScript

Edit in sandbox 
        
            
        Storage.set('date', new Date(), 1);

Methods

Name Description Example
set Add new data to local storage Storage.set( ... )
get Get data from local storage Storage.get( ... )
remove Remove data from local storage Storage.remove( ... )
check Check the data has not expired Storage.check( ... )
Edit in sandbox 
        
            
        Storage.set('name', 'value', 1);