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

时间:2024-02-17 10:34:04

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()进而实现清除状态的效果 实现用户注销