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中存储的数据仅在当前会话期间有效，当用户关闭浏览器标签页或浏览器窗口时，数据将被清除。

vue watch监听sessionStorage

在Vue中，你可以使用`watch`选项来监听`sessionStorage`的变化。首先，你需要在Vue组件的`data`选项中定义一个变量，用来存储`sessionStorage`的值。然后，在`watch`选项中监听该变量的变化。

下面是一个示例代码：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      sessionStorageValue: null
    };
  },
  created() {
    // 初始化时获取sessionStorage的值
    this.sessionStorageValue = sessionStorage.getItem('key');
  },
  watch: {
    sessionStorageValue(newValue) {
      // 当sessionStorageValue的值发生变化时执行的回调函数
      console.log('sessionStorage的值发生变化了', newValue);
    }
  }
};
</script>

在上述代码中，我们通过在`created`生命周期钩子中获取`sessionStorage`的值，并将其赋给`sessionStorageValue`。然后，通过在`watch`选项中监听`sessionStorageValue`的变化，当`sessionStorageValue`的值发生变化时，会执行相应的回调函数。

你可以根据实际需求在回调函数中进行相应的操作。