Vue 退出 清楚 sessionStorage

可以在 Vue 的 `beforeDestroy` 钩子函数中清除 `sessionStorage`，代码如下：

beforeDestroy() {
  sessionStorage.clear();
}

这样在组件销毁前会清除当前页面的 `sessionStorage`。

相关问题

vue如何使用sessionStorage

在Vue中使用sessionStorage非常简单。sessionStorage是浏览器提供的一种存储机制，可以在当前会话期间保存数据。下面是使用sessionStorage的步骤：

1. 在Vue组件中，可以通过`window.sessionStorage`来访问sessionStorage对象。

2. 使用`sessionStorage.setItem(key, value)`方法将数据存储到sessionStorage中，其中key是要存储的数据的键，value是要存储的数据的值。例如：

   window.sessionStorage.setItem('username', 'John');

3. 使用`sessionStorage.getItem(key)`方法获取存储在sessionStorage中的数据，其中key是要获取的数据的键。例如：

   const username = window.sessionStorage.getItem('username');
   console.log(username); // 输出：John

4. 使用`sessionStorage.removeItem(key)`方法从sessionStorage中移除指定键的数据。例如：

   window.sessionStorage.removeItem('username');

5. 使用`sessionStorage.clear()`方法清除sessionStorage中的所有数据。

需要注意的是，sessionStorage中存储的数据仅在当前会话期间有效，当用户关闭浏览器标签页或浏览器窗口时，数据将被清除。

vue3监听sessionstorage变化

Vue3中监听`sessionStorage`的变化通常会通过`watch`、` computed`属性或者第三方库如`vue-storage`来实现。以下是几种常见的做法：

1. 使用 `watch` 监听法：

import { watch } from 'vue';

export default {
  data() {
    return {
      storedValue: sessionStorage.getItem('key') || '',
    };
  },
  created() {
    // 初始化监听
    watch(() => sessionStorage.key, (newVal) => {
      if (newVal !== this.storedValue) {
        this.storedValue = newVal;
        // 可在此处处理更新后的值
      }
    });
  },
};

2. 使用 `computed` 属性：

export default {
  data() {
    return {
      storedValue: sessionStorage.getItem('key') || '',
    };
  },
  computed: {
    watchedValue() {
      return sessionStorage.getItem('key');
    },
  },
  watch: {
    watchedValue(newVal) {
      if (newVal !== this.storedValue) {
        this.storedValue = newVal;
        // 更新处理
      }
    },
  },
};

3. 使用第三方库 `vue-storage`：
首先安装依赖：

npm install vue-storage

然后在组件中使用：

import VueStorage from 'vue-storage';

Vue.use(VueStorage);

export default {
  mounted() {
    this.$storage.on('change', key => {
      if (key === 'yourKey') {
        this.yourValue = this.$storage.get(key);
      }
    });
  },
};

记得在卸载组件时移除监听，避免内存泄漏。