Storage management

Angular 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

Basic example

The Storage Component provides methods to add, remove and get Storage.

Set Storage

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

        
            
          <button (click)="setStorageBasicExample()" type="button" class="btn btn-primary">
            Set storage
          </button>
          <button (click)="resetStorageBasicExample()" type="button" class="btn btn-primary">
            Reset storage
          </button>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbStorageManagementService } from 'mdb-angular-storage-management';
          
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
          })
          export class AppComponent {
            constructor(private _storageService: MdbStorageManagementService) { }
          
            setStorageBasicExample() {
              this._storageService.set('first-visit', new Date(), 1);
            }

            resetStorageBasicExample() {
              this._storageService.remove('first-visit');
            }
          }

Set the expiration time

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

        
            
            storageService.set('date', new Date(), 1);

Get storage

If you have saved any data in the storage, you can load them using the storageService.get method. 

        
            
            storageService.get('name');

Remove Storage

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

        
            
            storageService.remove('name');

Check Storage

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

        
            
            storageService.check('name', 0.5, () => {
              // do something
            });

Advanced example

Show Modal for new users

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. 

        
            
          import { Component } from '@angular/core';
          
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html'
          })
          export class AppComponent {
            modalRefUser: MdbModalRef<ModalUserComponent> | null = null;
          
            constructor(
              private _storageService: MdbStorageManagementService,
              private _modalService: MdbModalService
            ) {}
          
            setStorageForNewUser() {
              if (this._storageService.get('is-first-visit') === null) {
                this.modalRefUser = this._modalService.open(ModalUserComponent);
          
                this.modalRefUser.onClose.subscribe((message: any) => {
                  this._storageService.set('is-first-visit', false);
                });
              }
            }
          
            resetStorageForNewUser() {
              this._storageService.remove('is-first-visit');
            }
          }

Show modal after next visit

If you want to display the modal to the person who will visit the page again, 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. 

        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
          })
          export class AppComponent {
            modalRefScoring: MdbModalRef<ModalScoringComponent> | null = null;
          
            constructor(
              private _storageService: MdbStorageManagementService,
              private _modalService: MdbModalService
            ) {}
          
            setStorageForScoring() {
              this.showModalScoring(3);
            }
          
            resetStorageForScoring() {
              this._storageService.remove('visit-counter');
            }
          
            showModalScoring(value: number) {
              const counter = Number(this._storageService.get('visit-counter')) || 0;
              const newCounter = counter + 1;
          
              this._storageService.set('visit-counter', newCounter);
          
              if (newCounter === value) {
                this.modalRefScoring = this._modalService.open(ModalScoringComponent);
              }
            }
          }

Storage management - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

        
            
     npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/storage-management

Import

Edit in sandbox 
        
            
          import { MdbStorageManagementService } from 'mdb-angular-storage-management';
          …
          @NgModule ({
            ...
            providers: [MdbStorageManagementService],
            ...
          })

Methods

Name Description Example
set(name: string, value: any, expires?: number | Date) Add new data to local storage storageService.set('name', 'value', 1)
get(name:string) Get data from local storage storageService.get('name')
remove(name:string) Remove data from local storage storageService.remove('name')
check(name: string, time: number, callback: () => void) Check the data has not expired storageService.check('value',1,callback)
Edit in sandbox 
        
            
          <button (click)="setStorage()" type="button" class="btn btn-primary">
            Set cookie
          </button>                             
          
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbStorageManagementService } from 'mdb-angular-storage-management';
          
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
          })
          export class AppComponent {
            constructor(private _storageService: MdbStorageManagementService) {}
          
            setStorage() {
              this._storageService.set('first-visit', new Date(), 1);
            }
          }