vue3实时监听LocalStorage的变化

在Vue 3中，可以使用watch来监听localStorage的变化。但是，localStorage本身并不提供监听变化的API，因此需要使用轮询的方式来检测变化。

以下是一个简单的例子，展示如何实现对localStorage变化的实时监听：

<template>
  <div>
    LocalStorage Value: {{ storageValue }}
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
 
const storageValue = ref(localStorage.getItem('myKey') || '');
 
let intervalId;
 
onMounted(() => {
  intervalId = setInterval(() => {
    const newValue = localStorage.getItem('myKey');
    if (newValue !== storageValue.value) {
      storageValue.value = newValue;
    }
  }, 1000); // 轮询间隔可以根据需要调整
});
 
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});
 
watch(storageValue, (newValue) => {
  console.log(`LocalStorage value changed to: ${newValue}`);
});
</script>

在这个例子中，我们使用了Vue 3的setup语法糖来简化组件的定义。我们创建了一个响应式引用storageValue来存储localStorage中'myKey'对应的值。在组件挂载后，我们开始一个定时器，每隔一秒检查一次localStorage中'myKey'的值是否有变化，如果有变化，则更新storageValue。在组件卸载前，我们清除定时器。

这个方案并不是最高效的，因为它使用轮询机制来检查变化。对于频繁变化的数据，这可能会导致性能问题。对于更高要求的场景，可以考虑使用MutationObserver来监听存储变化。但是，MutationObserver不能直接监听localStorage，因此可能需要一些额外的逻辑来适配。