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

This topic created in 1158 days ago, the information mentioned may be changed or developed.

前几天发了一个帖子关于如何实现 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