vue3怎么使用sessionStorage

要在 Vue3 中使用 sessionStorage，可以使用以下方式：

1. 在组件中使用 sessionStorage：

// 在组件中设置 sessionStorage：
sessionStorage.setItem("key", "value");

// 在组件中获取 sessionStorage：
const value = sessionStorage.getItem("key");

2. 在 Vue3 中使用插件 vue-web-storage：

npm install vue-web-storage --save

// 在 main.js 中注册插件：
import VueWebStorage from 'vue-web-storage';
createApp(App).use(VueWebStorage, {
  prefix: 'app_', // default `app_`
  drivers: ['session'], // default 'local'
});

// 在组件中使用：
this.$session.set('key', 'value');
const value = this.$session.get('key');

这样就可以在 Vue3 中轻松地使用 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`或者`MutationObserver` API。以下是两种方法的示例：

**使用 watch 方法：**

import { watch } from 'vue';

export default {
  setup() {
    const handleSessionStorageChange = () => {
      // 检查 sessionStorage 是否有更新
      if (sessionStorage.getItem('yourKey')) {
        console.log('sessionStorage changed');
        // 在这里处理更新后的值
      }
    };

    watch(() => sessionStorage, handleSessionStorageChange); // 监听整个 sessionStorage

    return { handleSessionStorageChange };
  },
}

在这个例子中，当`sessionStorage`中的内容改变时，`handleSessionStorageChange`函数会被触发。

**使用 MutationObserver：**

import { onMounted } from 'vue';
import { observe } from 'immer'; // 如果你的项目用了 Immer，需要引入这个库

onMounted(() => {
  const observer = new MutationObserver(mutationsList => {
    mutationsList.forEach(mutation => {
      if (mutation.type === 'childList') { // 只关注添加、删除节点的情况
        const key = mutation.addedNodes.textContent || mutation.removedNodes.textContent;
        console.log(`sessionStorage changed: ${key}`);
        // 处理变化
      }
    });
  });

  observer.observe(window.sessionStorage, { attributes: false, childList: true, subtree: true }); // 监听指定的对象
});

记得在不再需要监控时调用`observer.disconnect()`关闭观察。