【问题标题】：How to remove localStorage after timeout of a snackbar?如何在小吃店超时后删除 localStorage？
【发布时间】：2022-02-03 07:58:58
【问题描述】：

我正在使用这个 Vuetify <v-snackbar，我根据我存储在 localStorage 中的值触发了它。

/创建

创建对象后

例如

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

使用这些代码

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

/索引（列表）

我检查了 localStorage 并显示了正确的警报 message + color。

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

timeout="2000" 我的警报隐藏后，我想删除我的 localStorage，所以当我刷新页面时，我不会再看到相同的警报。

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

【问题讨论】：

我在 /create ，并重定向到 index(list) 页面。
然后使用 sessionStorage
我是否清楚logOut 有什么关系？
如何在我的小吃店隐藏起来做点什么？
这有帮助吗：stackoverflow.com/questions/53119737/…

标签： javascript vue.js local-storage vuetify.js

【解决方案1】：

您可以查看您的反应数据alert。当alert数据为假时，可以清除localStorage

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

}

【讨论】：