0
268
ViewsHow to remove localStorage after timeout of a snackbar?
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')
·
Juan Pablo Isaza
1 answers
Answer question0
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')
}
}
}
·
Juan Pablo Isaza
Report
Answer question