React使用Context时如何将状态持久化保存到LocalStorage

仅需修改自定义状态Hook useInitialState 的逻辑即可，原有业务组件、Context层的调用代码无需任何改动。核心实现逻辑为两点：状态初始化时优先读取LocalStorage中已存储的计数，状态更新时自动同步写入LocalStorage。

修改后的完整Hook代码如下：

import { useState, useEffect } from "react"

// 本地存储的key，统一管理避免硬编码冲突
const STORAGE_KEY = "app_fav_counter"
// 兜底默认状态
const defaultState = {
  favCounter: 0
}

// 读取本地存储的初始值，做异常兼容
const getInitialState = () => {
  try {
    const storedValue = localStorage.getItem(STORAGE_KEY)
    // 无存储值时返回默认状态
    if (!storedValue) return defaultState
    // 解析存储的JSON字符串
    return JSON.parse(storedValue)
  } catch (err) {
    // 解析失败、本地存储被禁用/不可用时，回退到默认状态
    return defaultState
  }
}

const useInitialState = () => {
  // 懒初始化状态：仅组件首次挂载时读取一次本地存储，避免每次渲染重复读取
  const [state, setState] = useState(getInitialState)

  // 监听状态变化，每次更新自动同步到本地存储
  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
    } catch (err) {
      // 写入失败场景（如浏览器隐私模式、存储配额已满）可在此处加自定义处理，不阻断主逻辑
    }
  }, [state])

  const incrementFav = () => {
    // 用函数式更新拿最新状态，规避闭包导致的计数错误
    setState(prev => ({
      ...prev,
      favCounter: prev.favCounter + 1
    }))
  }

  const decrementFav = () => {
    setState(prev => ({
      ...prev,
      favCounter: prev.favCounter - 1
    }))
  }

  return {
    state,
    incrementFav,
    decrementFav
  }
}

export default useInitialState

关键调整点 #

• 状态初始化采用懒加载模式，仅首次挂载时读取本地存储，减少不必要的性能损耗
• 所有LocalStorage读写逻辑都加了异常捕获，避免隐私模式、存储损坏、配额满等边缘场景导致页面崩溃
• 增减计数方法改用函数式更新，解决异步更新状态时可能出现的闭包旧值问题
• 同步存储逻辑统一放在useEffect中执行，不需要在每个调用增减方法的位置重复写存储代码，维护性更高
• Hook对外暴露的返回值、方法签名和原有逻辑完全一致，上层业务代码零改动即可生效

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