vue3实时监听LocalStorage的变化

此方法只适用于同一个地址下的不同标签页（类似于打开一个新窗口），如果是同一个标签页，监听不会生效
（使用场景：一个浏览器中同时打开两个窗口a页面和b页面，在a页面中改变了localStorage的值，b页面能监听到localStorage的变化。a，b需要在同一个域名下）

onMounted(() => {
  // 添加 storage 事件监听器
  window.addEventListener('storage', handleStorageEvent);
});

// 处理 storage 改变事件
const handleStorageEvent = (event) => {
  if (event.key === 'attributeDoneJson') {	//这里是你存入LocalStorage的键名
    console.log('json变了'，event.newValue) 	//获取到改变后的值
  }
};

// 在组件销毁时清除定时器
onBeforeUnmount(() => {
  //移除监听器
  window.removeEventListener('storage', handleStorageEvent);
});

如果想在同一个标签页中生效，可以使用以下方法，原理是重写localStorage下的所有方法，通过中介者模式进行通信
（使用场景：比如在切换左侧菜单A组件时更改了localStorage，这时右侧的页面B组件可以监听到当前页面中localStorage的变化。A，B组件在同一个页面中）

// mediator.ts
export interface MediatorProps {
    uuid?: number;
    publish?: (topic: string, ...args: unknown[]) => void;
    subscribe?: (topic: string, callback: (...args: unknown[]) => void) => void;
}
const mediator = (function () {
    let topics = [],
        uuid = 0;
    function subscribe(topic: string, callback: (...args: unknown[]) => void) {
        uuid++;
        topics[topic] = topics[topic]
            ? [...topics[topic], { callback, uuid }]
            : [{ callback, uuid }];
    }
    function publish(topic: string, ...args: unknown[]) {
        if (topics[topic]) {
            topics[topic].map((item) => item.callback(...args));
        }
    }
    return {
        install: function (obj: MediatorProps) {
            obj.uuid = uuid;
            obj.publish = publish;
            obj.subscribe = subscribe;
            return obj;
        },
    };
})();
export default mediator;

// useStorage.ts
import { ref } from "vue";
import mediator from "./mediator";
const createMediator = () => mediator.install({});
export const useStorage = (key: string) => {
    const string = ref(null);
    const sub = createMediator();
    sub.subscribe(key, (value) => string.value = value);
    return string;
};

// myLocalStorage.ts
import mediator from "./mediator";
const keys: string[] = [];
const createMediator = () => mediator.install({});
const sub = createMediator();
export const myLocalStorage = {
    getItem: (key: string) => {
        return window.localStorage.getItem(key);
    },
    setItem: (key: string, value: any) => {
        // 防止重复发布
        if (!keys.includes(key)) keys.push(key);
        // 被修改就发布事件
        sub.publish(key, value);
        window.localStorage.setItem(key, value);
    },
    clear: () => {
        // 被删除就每个key发布事件
        keys.map((key) => sub.publish(key, undefined));
        // 发布后清空记录key的数组
        keys.length = 0;
        window.localStorage.clear();
    },
    removeItem: (key: string) => {
        keys.splice(keys.indexOf(key), 1);
        // 被移除就发布 undefined
        sub.publish(key, undefined);
        window.localStorage.removeItem(key);
    },
    key: window.localStorage.key,
    length: window.localStorage.length,
};

在赋值的页面使用

import { myLocalStorage } from "./store/myLocalStorage";

function handleNodeClick() {
	myLocalStorage.setItem("myKey",“123456”)
}

需要监听的页面

import { useStorage  } from "../store/useStorage";

watch(useStorage("stationId"), (newValue, oldValue) => {
  console.log(newValue);
});