Vue-点击注销清除清除localStorage缓存 实现用户注销

Vue-点击注销清除清除localStorage缓存

最近在写一个vue项目时需要用到注销按钮，判断是否登录的条件是浏览器保存了用户token，点击注销清除localStorage缓存。实现用户注销

在localStorage中储存数据，方便在页面中使用数据的时候调用。如果用完数据之后需要清除localStorage中储存的数据，可以使用以下几种方式：

(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~)

1. localStorage.clear() 可以清除localStorage中所有的key

   methods: {
        clear_data() {
             localStorage.clear();
        }
   }
   

   (~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~)

2. localStorage.removeItem() 通过以下方法来删除对应key以及key中的内容

   methods: {
        clear_data() {
             window.localStorage.removeItem('key')
        }
   }
   

   (~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~)

3. localStorage.setItem() 可以清空储存在localStorage中的key对应的value值，而保留key

   methods: {
        clear_data() {
             // 第一个参数为key的名，第二个参数为空
             localStorage.setItem("key", "")  
        }
   }
   

可以选择这个localStorage.clear()进而实现清除状态的效果 实现用户注销