如何关闭页面之前清空LocalStorage

一、 前言

在实际的Vue项目中我们为了做持久化，会使用vuex配合localstorage、cookie、等实现数据的持久化，不至于出现刷新页面出现数据丢失；localstorage的特点是生命周期是永久除非你手动清除，这会导致一个问题，比如你想要在关闭页面的时候清除本地存储内容，就需要做一定的处理，下面将结合vue项目遇到的问题为大家提供解决方法；

二、问题描述

在vue项目中为了做访问权限，需要在请求拦截器中注入token，相反在你退出登录时，必须清除本地存储的token，但是如果你是使用locastorage存储数据这会出现一个bug，即当你不是通过退出按钮退出页面，而是直接点击关闭按钮关闭了页面就会导致一个问题：本地存储的token值还存在；此时如果你在路由前置守卫中做了路由鉴权就会导致下一次打开页面，路由前置守卫发现本地还有token就会直接跳转到欢迎界面。对于这个问题下面我为大家提供解决办法；

三、解决办法

解决以上问题的关键显然是如何监听关闭页面的事件，只要关闭页面就清除本地存储的token；
我们只需要在App组件的mounted钩子里面给window绑定一个beforeunload事件，在回调函数里面清除token，如下图所示；

代码示例如下：

mounted () {
    // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
    window.onbeforeunload = function (e) {
      const storage = window.localStorage
      storage.clear()
    }
  }

写在最后

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞