Storage management
Vue 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 and Vue 3. 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 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.
<template>
<MDBBtn color="primary" @click="setBasicStorage">
Set storage
</MDBBtn>
<MDBBtn color="primary" @click="resetBasicStorage">
reset storage
</MDBBtn>
<span>
{{ basicStorage }}
</span>
</template>
<script>
import { inject, ref } from "vue";
import { MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtn
},
setup() {
const Storage = inject("MDBStorage");
const basicStorage = ref(Storage.get('first-visit'));
const setBasicStorage = () => {
Storage.set("first-visit", new Date(), { expires: 1 });
basicStorage.value = Storage.get("first-visit");
};
const resetBasicStorage = () => {
Storage.remove("first-visit");
basicStorage.value = Storage.get("first-visit");
};
return {
basicStorage,
setBasicStorage,
resetBasicStorage,
};
},
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
import { MDBBtn } from 'mdb-vue-ui-kit';
const Storage = inject<Storage>("MDBStorage");
const basicStorage = ref(Storage?.get('first-visit'));
const setBasicStorage = () => {
Storage?.set("first-visit", new Date(), { expires: 1 });
basicStorage.value = Storage?.get("first-visit");
};
const resetBasicStorage = () => {
Storage?.remove("first-visit");
basicStorage.value = Storage?.get("first-visit");
};
</script>
Set the expiration time
You can set the expiration time (in days) of saved data in local storage
<script>
import { inject, ref } from "vue";
export default {
setup() {
const Storage = inject("MDBStorage");
const setExpTimeStorage = () => {
Storage.set('date', new Date(), 1);
};
return {
setExpTimeStorage,
};
},
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
const Storage = inject<Storage>("MDBStorage");
const setExpTimeStorage = () => {
Storage?.set('date', new Date(), 1);
};
</script>
Get storage
If you have saved any data in the storage, you can load them using the
Storage.get method.
<script>
import { inject, ref } from "vue";
export default {
setup() {
const Storage = inject("MDBStorage");
const getStorage = () => {
Storage.get("storage-name");
};
return {
getStorage,
};
},
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
const Storage = inject<Storage>("MDBStorage");
const getStorage = () => {
Storage?.get("storage-name");
};
</script>
Remove Storage
When the data saved in storage are no longer needed and you want to delete them, use
Storage.remove method.
<script>
import { inject, ref } from "vue";
export default {
setup() {
const Storage = inject("MDBStorage");
const removeStorage = () => {
Storage.remove("storage-name");
};
return {
removeStorage,
};
},
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
const Storage = inject<Storage>("MDBStorage");
const removeStorage = () => {
Storage?.remove("storage-name");
};
</script>
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.
<script>
import { inject, ref } from "vue";
export default {
setup() {
const Storage = inject("MDBStorage");
const checkStorage = () => {
Storage.check('name', 0.5, () => {
// do something
});
};
return {
checkStorage,
};
},
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
const Storage = inject<Storage>("MDBStorage");
const checkStorage = () => {
Storage?.check('name', 0.5, () => {
// do something
});
};
</script>
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.
<template>
<MDBBtn color="primary" @click="setNewUserStorage">
Show modal
</MDBBtn>
<MDBBtn color="primary" @click="resetNewUserStorage"> Reset </MDBBtn>
<MDBModal
id="newUserModal"
tabindex="-1"
labelledby="newUserModalLabel"
v-model="newUserModal"
>
<MDBModalHeader>
<MDBModalTitle id="newUserModalLabel">
This is modal for new user
</MDBModalTitle>
</MDBModalHeader>
<MDBModalBody>
This model will not appear again until you press the reset
button and refresh the page
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" @click="newUserModal = false">Close</MDBBtn>
</MDBModalFooter>
</MDBModal>
</template>
<script>
import { inject, ref } from "vue";
import { MDBBtn, MDBModal, MDBModalHeader, MDBModalTitle, MDBModalBody, MDBModalFooter } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtn,
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter
},
setup() {
const Storage = inject("MDBStorage");
const newUserModal = ref(false);
const setNewUserStorage = () => {
Storage.showModalNewUser(newUserModal);
};
const resetNewUserStorage = () => {
Storage.remove("is-first-visit");
};
return {
newUserModal,
setNewUserStorage,
resetNewUserStorage,
};
},
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
import { MDBBtn, MDBModal, MDBModalHeader, MDBModalTitle, MDBModalBody, MDBModalFooter } from 'mdb-vue-ui-kit';
const Storage = inject<Storage>("MDBStorage");
const newUserModal = ref(false);
const setNewUserStorage = () => {
Storage?.showModalNewUser(newUserModal);
};
const resetNewUserStorage = () => {
Storage?.remove("is-first-visit");
};
</script>
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.
<template>
<MDBBtn color="primary" @click="setNextVisitStorage">
Show modal
</MDBBtn>
<MDBBtn color="primary" @click="resetNextVisitStorage">
Reset
</MDBBtn>
<MDBModal
id="nextVisitModal"
tabindex="-1"
labelledby="nextVisitModalLabel"
v-model="nextVisitModal"
>
<MDBModalHeader>
<MDBModalTitle id="nextVisitModalLabel">
This model shows up after the third visit to the page.
</MDBModalTitle>
</MDBModalHeader>
<MDBModalBody>
This model will not appear again until you press the reset
button and refresh the page
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" @click="nextVisitModal = false"
>Close</MDBBtn
>
</MDBModalFooter>
</MDBModal>
</template>
<script>
import { inject, ref } from "vue";
import { MDBBtn, MDBModal, MDBModalHeader, MDBModalTitle, MDBModalBody, MDBModalFooter } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtn,
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter
},
setup() {
const Storage = inject("MDBStorage");
const nextVisitModal = ref(false);
const setNextVisitStorage = () => {
Storage.showModalScoring(nextVisitModal, 3);
};
const resetNextVisitStorage = () => {
Storage.remove("visit-counter");
};
return {
nextVisitModal,
setNextVisitStorage,
resetNextVisitStorage,
};
},
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
import { MDBBtn, MDBModal, MDBModalHeader, MDBModalTitle, MDBModalBody, MDBModalFooter } from 'mdb-vue-ui-kit';
const Storage = inject<Storage>("MDBStorage");
const nextVisitModal = ref(false);
const setNextVisitStorage = () => {
Storage?.showModalScoring(nextVisitModal, 3);
};
const resetNextVisitStorage = () => {
Storage?.remove("visit-counter");
};
</script>
Storage management - API
Import
import { createApp } from "vue";
import App from "./App.vue";
import Storage from 'mdb-vue-storage';
const app = createApp(App);
app.use(Storage).mount("#app");
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( ... )
|
showModalNewUser |
Shows modal for new user |
Storage.showModalNewUser( ... );
|
showModalScoring |
Shows modal on specific visit |
Storage.showModalScoring( ... );
|
<script>
import { inject } from "vue";
export default {
setup() {
const Storage = inject("MDBStorage");
Storage.set('name', 'value', 1);
},
};
</script>