React中localStorage.getItem失效 页面刷新后存储数据丢失

这是React useEffect执行顺序导致的覆盖问题，和localStorage本身的API无关：

• 组件首次挂载时，所有无依赖/依赖匹配的useEffect会按代码书写顺序依次执行
• 你当前的代码里，负责读取存储的useEffect（空依赖数组）先执行，读取到旧值调用setContacts更新状态，但状态更新是异步的，不会立刻改变当前渲染周期里的contacts值
• 紧接着负责写入存储的useEffect执行，此时拿到的contacts还是组件初始化时的默认空值，直接把空值写入localStorage，覆盖了之前存的有效数据，最终表现为刷新后数据消失

推荐直接把localStorage读取逻辑移到useState的初始化阶段，从根源避免执行顺序冲突，代码更简洁：

const local_Storage_key = 'your_storage_key'

function ContactComponent() {
  // 初始化state时同步读取本地存储，不需要等挂载后再赋值
  const [contacts, setContacts] = useState(() => {
    const cachedData = localStorage.getItem(local_Storage_key)
    return cachedData ? JSON.parse(cachedData) : []
  })

  // 仅保留写入逻辑，只有contacts真正变化时才会更新存储
  useEffect(() => {
    localStorage.setItem(local_Storage_key, JSON.stringify(contacts))
  }, [contacts])

  // 其余业务逻辑
}

如果不想改state初始化逻辑，也可以用ref标记首次渲染状态，挂载阶段跳过写入操作：

const isFirstRender = useRef(true)
const [contacts, setContacts] = useState([])

useEffect(() => {
  const cachedData = localStorage.getItem(local_Storage_key)
  if (cachedData) setContacts(JSON.parse(cachedData))
}, [])

useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false
    return
  }
  localStorage.setItem(local_Storage_key, JSON.stringify(contacts))
}, [contacts])

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