使用 useLocalStorage 实现 electron、网页多窗口 state 同步

前几天发了一个帖子关于如何实现 electron 多窗口开发，发现思路有点问题。今天又想到了可以用 localStorage+hook 的方式。浏览器 window 可以监听 storage 的变化。并用 mobx 来管理状态，当状态值发生变化的时候，往 localStorage 中写入新的序列化后的值。

有评论区大哥说可以封装一个 ipc 的 proxy 。 但是我觉得 ipc 这玩意还是太过复杂，不如把所有的逻辑都放在渲染进程写。

hook 代码

import { autorun, observable } from "mobx";
import { useEffect } from "react";

export const useLocalStorage = <T>(storageKey: string, fallbackState: T) => {
  const state = observable({
    value: JSON.parse(localStorage.getItem(storageKey)) ?? fallbackState,
  });

  autorun(() => {
    localStorage.setItem(storageKey, JSON.stringify(state.value));
  });
  const onStorageUpdate = (e) => {
    const { key, newValue } = e;
    state.value = JSON.parse(newValue);
  };
  useEffect(() => {
    localStorage.setItem(storageKey, JSON.stringify(state.value));
    window.addEventListener("storage", onStorageUpdate);

    return () => {
      window.removeEventListener("storage", onStorageUpdate);
    };
  }, [state.value, storageKey]);

  return [state.value];
};

主窗口

const App = observer(() => {
  const [store, setStore] = useLocalStorage("store", countStore);
  return (
    <div>
      <h1>I am Main Window</h1>
      <button
        onClick={() => {
          const win = window.open("child.html");
        }}
      >
        Open Child Window
      </button>
      <div>store.count = {store.count}</div>
      <button
        onClick={() => {
          store.count--;
        }}
      >
        minus-
      </button>
      <button
        onClick={() => {
          store.count++;
        }}
      >
        plus+
      </button>
    </div>
  );
});

子窗口

const Child = observer(() => {
  const [store, setStore] = useLocalStorage('store', null);

  return (
    <div>
      <h1 onClick={() => {
        store.count ++
      }}>I am Child Window</h1>
      <div>store.count = {store.count}</div>
    </div>
  );
});

效果图

demo 链接：

https://github.com/wxydev1/electron-sync-state