localStorage的storage事件未触发，如何实时同步数据给预览子组件？

你遇到的storage事件不触发的情况，是由两个层面的原因叠加导致的：

1. 原生window.onstorage事件的设计规则是：仅当同源下其他标签页/窗口对localStorage执行写入操作时，才会在当前页面触发回调。如果是当前页面内部自己调用localStorage.setItem写入数据，永远不会触发该事件，这是最核心的逻辑误区。
2. 你之前把事件绑定逻辑直接写在函数组件的渲染主体里，每次组件重新渲染都会覆盖原有的事件赋值，既没有做组件挂载时的绑定初始化，也没有在组件卸载时清理全局事件，哪怕事件本身能触发，也会因为重复渲染的逻辑被冲掉。

你现在已经写好了表单按键时写入localStorage的逻辑，不需要完全推翻重做，按照下面的步骤调整即可：

1. 改造localStorage写入逻辑，补上同页面的事件通知 #

既然原生storage事件不支持同页面内的写入通知，我们可以用浏览器原生的CustomEvent做同页面的变更桥接，不需要引入额外依赖：
在你现有的handlePreview函数中，写完localStorage数据后，手动派发一个自定义事件把最新数据传出去：

const handlePreview = () => {
  const newData = JSON.stringify(updateFormState)
  localStorage.setItem('pagePreviewData', newData)
  // 手动派发自定义事件，通知同页面内的其他组件感知数据变更
  window.dispatchEvent(new CustomEvent('pagePreviewStorageUpdate', {
    detail: newData
  }))
}

2. 重构Preview组件的监听逻辑，补上正确的绑定与清理 #

把之前直接写在渲染主体里的事件绑定，移到useEffect钩子中实现，同时处理首次加载时的本地数据初始化、组件卸载时的事件清理，避免内存泄漏和重复渲染的问题：

import { useState, useEffect } from 'react';

function Preview({ userData }) {
  const [previewData, setPreviewData] = useState(userData);

  useEffect(() => {
    // 组件首次挂载时，先读取一次本地暂存的草稿数据，避免首次进入时预览和表单不同步
    const savedLocalData = localStorage.getItem('pagePreviewData')
    if (savedLocalData) {
      setPreviewData(JSON.parse(savedLocalData))
    }

    // 绑定自定义的本地存储更新事件
    const handlePreviewUpdate = (e) => {
      const latestData = JSON.parse(e.detail)
      setPreviewData(latestData)
    }
    window.addEventListener('pagePreviewStorageUpdate', handlePreviewUpdate)

    // 组件卸载时清理事件绑定，避免内存泄漏
    return () => {
      window.removeEventListener('pagePreviewStorageUpdate', handlePreviewUpdate)
    }
  }, []) // 空依赖数组，保证事件只在组件挂载时绑定一次

  const theme = previewData.theme;
  
  return (
    <div
      className={theme}
      style={{
        backgroundColor: 'var(--background-default)',
        padding: '0 25px',
      }}
    >
      <Header userData={previewData}></Header>
      <main>
        <PageBody userData={previewData}></PageBody>
      </main>
      <FooterPage userData={previewData}></FooterPage>
    </div>
  );
}

export default Preview;

你的组件结构是父组件Edit下同时包含EditForm和Preview两个子组件，完全没必要绕localStorage事件桥接做跨组件通信，把预览暂存状态提升到父组件做受控传递，既可以保留你不频繁请求数据库的性能考量，也能完全避免监听逻辑的兼容问题：

1. 在父组件Edit中维护临时预览状态，表单变更时直接更新状态、同步备份到localStorage做草稿持久化：

   function Edit() {
     // 初始预览值直接来自数据库查询结果
     const [tempPreviewData, setTempPreviewData] = useState(initialDataFromDB)
   
     // 表单输入时触发的更新函数
     const handleFormChange = (latestFormState) => {
       setTempPreviewData(latestFormState)
       // 保留原来的localStorage暂存逻辑做草稿备份
       localStorage.setItem('pagePreviewData', JSON.stringify(latestFormState))
     }
   
     return (
       <div className="edit-page-wrapper">
         {/* 把状态更新函数传给侧边栏表单组件 */}
         <EditForm 
           formState={tempPreviewData}
           onFormChange={handleFormChange}
         />
         {/* 直接把最新的暂存数据传给预览组件，不需要任何事件监听 */}
         <Preview userData={tempPreviewData} />
       </div>
     )
   }
   

2. 这种结构下Preview组件甚至不需要维护内部的previewData状态，直接消费父组件传入的props即可，实时性更稳定，也没有跨组件通信的额外开销。

注意：如果你后续需要支持跨标签页的预览同步（比如同一个页面开两个标签页，一个改表单另一个实时变预览），原生的storage事件依然可以正常工作——只要在上面的useEffect里额外补一段对storage事件的监听即可，不需要改动现有逻辑。

内容的提问来源于stack exchange，提问作者Michael Napolitano