useEffect 在 chrome.storage.local 中的数据更改时更新状态

Question

我的代码运行得很好，但是当我更新本地存储中的某些内容时，除非重新加载应用程序，否则我的应用程序不会更新。我想要做的是，一旦 chrome 存储中的数据发生变化，就自动更新我的应用程序中的数据：

    const [profiles, setProfiles] = useState([]);
     useEffect(()=>{
   
      chrome.storage.local.get(["profiles"], (result) => {
        if (result.profiles) {
            console.log(result.profiles);
         
            setProfiles(  result["profiles"]);
          
        
            console.log(profiles);
        }
    });       
    },[])


  //run every time when the data changes
  useEffect(()=>{
    chrome.storage.local.set({ "profiles": profiles });
    console.log("running");
  },[profiles])

Answer 1

我整理了一个如何在 React 应用程序中使用 chrome.storage 的示例。有一个侦听器用于侦听更改（可以通过内容和/或后台脚本触发）。第二个监听器在组件安装时获取当前数据。

import React, { useState } from "react";

const App = () => {
  const [storageData, setStorageData] = useState();

  // Effect 1: Attach/remove storage onChanged listener
  useEffect(() => {
    const listener = () => {
      chrome.storage.sync.get(["storageData"], (result) => {
        setStorageData(result.storageData);
      })
    };
    chrome.storage.onChanged.addListener(listener);
    return () => {
      chrome.storage.onChanged.removeListener(listener);
    };
  }, []);

  // Effect 2: Sync local state with storage data on mount
  useEffect(() => {
    // 'sync' can be 'local', depends on your usecase
    chrome.storage.sync.get(["storageData"], (result) => {
      setStorageData(result.storageData);
    })
  }, []);
  
  // Example event handler to update the storage
  const someEventHandler = (event) => {
    chrome.storage.sync.set({ storagedata: event.target.value}, () => {
      alert("storage updated")
    })
  }

  return (
    <div>
      <pre>{JSON.stringify(storageData, null, 2)}</pre>
      {/* ... */}
    </div>
  );
};

Answer 2

您需要从窗口监听 onstorage 事件，并在那里应用您需要的逻辑

https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

window.onstorage = () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
};

或

window.addEventListener('storage', () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
});

也请参考这个答案：https://stackoverflow.com/a/56662261/1540560