CODEWITHSUNDEEP
javascriptvue.jslocal-storagevuetify.js
code-8
code-8

Reputation: 58790

How to remove localStorage after timeout of a snackbar?

enter image description here

I'm using this Vuetify <v-snackbar, I triggered it base on values that I stored in localStorage.

/create

After I created my object

Ex.

localStorage.setItem('alert', true)
localStorage.setItem('alertColor', 'green')
localStorage.setItem('alertMessage', this.form.values.name + ' - created successfully!')

With these codes

<v-snackbar timeout="2000" v-model="alert" absolute top :color="alertColor" outlined right>
    <strong>
        {{ alertMessage }}
    </strong>
</v-snackbar>

/index (list)

I checked localStorage and show a proper alert message + color.

export default {
    data() {
        return {
            alert: localStorage.getItem('alert'),
            alertColor: localStorage.getItem('alertColor'),
            alertMessage: localStorage.getItem('alertMessage'),

After timeout="2000" my alert hide, I would like to remove my localStorage so when I refresh the page, I don't see that same alert again.

localStorage.removeItem('alert')
localStorage.removeItem('alertColor')
localStorage.removeItem('alertMessage')

Upvotes: 0

Views: 278

Answers (1)

Nico
Nico

Reputation: 111

You can watch your reactive data alert. When the alert data is false, then you can clear the localStorage

export default {
 data(){
   return {
     alert: false
   }
 },
 watch:{
  alert(newValue){
     if(!newValue) clearLocalStorage()
  }
 },
 methods:{
   clearLocalStorage(){
     localStorage.removeItem('alert')
     localStorage.removeItem('alertColor')
     localStorage.removeItem('alertMessage')
   }
 }

}

Upvotes: 4

Related Questions