React中如何使用useState监听localStorage变更并同步更新state

核心问题分析 #

你的写法不生效是两个底层逻辑导致的：

• localStorage是浏览器提供的宿主引用类型对象，页面不刷新的前提下它的引用地址永远不会改变，useEffect的依赖对比是浅比较，检测不到内部存储值的变化，因此这个effect只会在组件首次挂载时执行一次
• 直接将localStorage对象传入setState时，React的状态更新会做浅比较，引用没有变化就会判定为状态未变更，直接跳过重渲染，自然不会有更新效果

可落地解决方案 #

第一步：封装统一的localStorage操作方法

浏览器原生的storage事件仅在其他标签页修改localStorage时触发，当前页面自行修改不会触发该事件，因此需要封装操作方法主动抛事件通知更新：

// 全局统一调用这个方法修改localStorage，不要直接调用原生setItem/removeItem
export const updateLocalStorage = (key, value) => {
  if (value === null || value === undefined) {
    localStorage.removeItem(key)
  } else {
    localStorage.setItem(key, typeof value === 'string' ? value : JSON.stringify(value))
  }
  // 抛出自定义事件，通知当前页面所有监听地方同步更新
  window.dispatchEvent(new CustomEvent('localStorage:change'))
}

第二步：封装自定义Hook实现同步监听

把同步逻辑封装成可复用的Hook，所有需要用到localStorage同步状态的组件直接调用即可：

import { useState, useEffect } from 'react'

// 同步整个localStorage的Hook
export const useSyncLocalStorage = () => {
  const [storage, setStorage] = useState({})

  useEffect(() => {
    // 把localStorage转成普通JS对象同步到state，不要直接存宿主对象
    const syncStorage = () => {
      const storageObj = {}
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i)
        storageObj[key] = localStorage.getItem(key)
      }
      setStorage(storageObj)
    }

    // 初始化同步一次
    syncStorage()

    // 监听当前页面的自定义修改事件
    window.addEventListener('localStorage:change', syncStorage)
    // 监听跨标签页的storage修改事件
    window.addEventListener('storage', syncStorage)

    // 组件卸载时移除监听避免内存泄漏
    return () => {
      window.removeEventListener('localStorage:change', syncStorage)
      window.removeEventListener('storage', syncStorage)
    }
  }, [])

  return storage
}

组件内使用示例

function YourComponent() {
  // 直接拿到实时同步的localStorage普通对象
  const storage = useSyncLocalStorage()

  // 后续所有修改操作都调用封装好的updateLocalStorage即可
  const handleAddItem = () => {
    updateLocalStorage('newKey', 'newValue')
  }

  return <div>{storage.newKey}</div>
}

优化提示 #

如果你只需要监听某一个特定的localStorage键，不需要同步整个存储，可以把Hook改写成指定key的版本，性能更好：

export const useLocalStorageValue = (key) => {
  const [value, setValue] = useState(localStorage.getItem(key))

  useEffect(() => {
    const sync = () => setValue(localStorage.getItem(key))
    window.addEventListener('localStorage:change', sync)
    window.addEventListener('storage', sync)
    return () => {
      window.removeEventListener('localStorage:change', sync)
      window.removeEventListener('storage', sync)
    }
  }, [key])

  return value
}

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