Storage management

Bootstrap 5 Storage management plugin

Storage hook 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 Hook provides methods to add, remove and get Storage.

Set Storage

Use the function setItem() to add data to storage. You can test this method using the example below. The button will call setItem(new Date()) and set a value to name provided in a hook declaration. To use this example again, press the reset button. 

import React from 'react';
import { MDBBtn } from 'mdb-react-ui-kit';
import { useMDBStorage } from 'mdb-react-storage-management';

export default function App() {
  const [item, { setItem, removeItem }] = useMDBStorage('date', '');

  return (
    <>
      <MDBBtn onClick={() => setItem(new Date())}>Set storage</MDBBtn>
      <MDBBtn onClick={removeItem}>Reset Storage</MDBBtn>
      <span>{item}</span>
    </>
  );
}

Set the expiration time

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

setItem(new Date(), 1)

Get storage

Your storage value is saved in the first value returned from hook. If there's no such a key in your localStorage - this value will have the initial one passed as second parameter to the hook. 

const [item] = useMDBStorage('date', '');

Remove Storage

When the data saved in storage are no longer needed and you want to delete them, use removeItem function. 

const [item, { setItem, removeItem }] = useMDBStorage('date', '');

Check Storage

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

const [value, { setItem, removeItem }] = useMDBStorage('name', 'initialValue', {
  time: 0.5,
  callback: () => { ... //do something }
)

Advanced example

Show Modal for new users

import React, { useState } from 'react';
import {
  MDBBtn,
  MDBModal,
  MDBModalDialog,
  MDBModalContent,
  MDBModalHeader,
  MDBModalTitle,
  MDBModalBody,
  MDBModalFooter,
} from 'mdb-react-ui-kit';
import { useMDBStorage } from 'mdb-react-storage-management';

export default function App() {
  const [isFirstVisit, { setItem: setFirstVisit }] = useMDBStorage('is-first-visit', true);
  const [firstVisitModal, setFirstVisitModal] = useState(false);

  const handleClick = () => {
    if (isFirstVisit) {
      setFirstVisitModal(true);
      setFirstVisit(false);
    }
  };

  return (
    <>
      <MDBBtn onClick={handleClick}>Show modal</MDBBtn>
      <MDBBtn onClick={() => setFirstVisit(true)}>Reset</MDBBtn>
      <MDBModal open={firstVisitModal} onClose={() => setFirstVisitModal(false)} tabIndex='-1'>
        <MDBModalDialog>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>This is modal for new user</MDBModalTitle>
              <MDBBtn className='btn-close' color='none' onClick={() => setFirstVisitModal(false)}></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>This model will not appear again until you press the reset button.</MDBModalBody>

            <MDBModalFooter>
              <MDBBtn color='secondary' onClick={() => setFirstVisitModal(false)}>
                Close
              </MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
    </>
  );
}

Show modal after next visit

import React, { useState } from 'react';
import {
  MDBBtn,
  MDBModal,
  MDBModalDialog,
  MDBModalContent,
  MDBModalHeader,
  MDBModalTitle,
  MDBModalBody,
  MDBModalFooter,
} from 'mdb-react-ui-kit';
import { useMDBStorage } from 'mdb-react-storage-management';

export default function App() {
  const [visitCounter, { setItem: setVisitCounter, removeItem: resetVisitCounet }] = useMDBStorage('visit-counter', 0);
  const [counterModal, setCounterModal] = useState(false);

  const handleVisitClick = () => {
    setVisitCounter(visitCounter + 1);

    if (visitCounter === 2) setCounterModal(true);
  };

  return (
    <>
      <MDBBtn onClick={handleVisitClick}>Show modal</MDBBtn>
      <MDBBtn onClick={() => setVisitCounter(0)}>Reset</MDBBtn>
      <MDBModal open={counterModal} onClose={() => setCounterModal(false)} tabIndex='-1'>
        <MDBModalDialog>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>This model shows up after the third visit to the page.</MDBModalTitle>
              <MDBBtn className='btn-close' color='none' onClick={() => setCounterModal(false)}></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>This model will not appear again until you press the reset button.</MDBModalBody>

            <MDBModalFooter>
              <MDBBtn color='secondary' onClick={() => setCounterModal(false)}>
                Close
              </MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
    </>
  );
}

Storage management - API

Import

import { useMDBStorage } from 'mdb-react-storage-management';

Properties

useMDBStorage

Name Type Default Description Example
value any '' This value is returned from the hook. It contains the current value of item in localStorage or an initial value. const [value, { setItem, removeItem }] = useMDBStorage('name', 'initialValue')
name String '' A name for the key property in your localStorage. const [value, { setItem, removeItem }] = useMDBStorage('name', 'initialValue')
initialValue any '' An initial value for your hook if there's no such a one in your localStorage. const [value, { setItem, removeItem }] = useMDBStorage('name', 'initialValue')
check Object | null null Check the data has not expired. const [value] = useMDBStorage('name', 'initialValue', { time: 0.5, callback: () => { console.log('expired') } })

Methods

Name Type Description Example
setItem Function This method sets a value in localStorage using name provided in a hook. <MDBBtn onClick={() => setItem('test')}>Set value to test</MDBBtn>
removeItem Function This method removes an item in the localStorage with name provided in a hook. <MDBBtn onClick={removeItem}>Remove an item</MDBBtn>