如何在React Context CRUD项目中将数据保存到LocalStorage？

要实现数据持久化，只需在初始化读取LocalStorage和状态变更时写入LocalStorage两个环节处理，以下是具体修改方案：

1. 从LocalStorage初始化初始状态 #

将原来固定的空数组初始状态，改为优先读取LocalStorage中的缓存数据，无缓存时 fallback 到空数组：

// 替换原initialState
const initialState = {
  contacts: JSON.parse(localStorage.getItem('contacts')) || [],
};

2. 监听状态变化，自动同步到LocalStorage #

在ContextProvider组件中引入useEffect，每当联系人数据发生变化时，自动将数据存入LocalStorage：

import React,{ createContext, useReducer, useEffect } from "react"; // 新增引入useEffect
import AppReducer from "./AppReducer";

const initialState = {
  contacts: JSON.parse(localStorage.getItem('contacts')) || [],
};

export const GlobalContext = createContext(initialState);

export const ContextProvider = ({children}) => {
  const [state, dispatch] = useReducer(AppReducer, initialState)

  // 新增：监听contacts变化，同步到LocalStorage
  useEffect(() => {
    localStorage.setItem('contacts', JSON.stringify(state.contacts));
  }, [state.contacts]); // 仅当contacts数据变更时执行存储

  const ADD_CONTACT = (contacts) => {
    dispatch({
      type: "ADD_CONTACT",
      payload: contacts,
    });
  };

  const REMOVE_CONTACT = (id) => {
    dispatch({
      type: "REMOVE_CONTACT",
      payload: id,
    });
  };

  const UPDATE_CONTACT = (contacts) => {
    dispatch({
      type: "UPDATE_CONTACT",
      payload: contacts,
    });
  };

  return (
    <GlobalContext.Provider
      value={{
        contacts: state.contacts,
        ADD_CONTACT,
        REMOVE_CONTACT,
        dispatch,
        UPDATE_CONTACT,
      }}
    >
      {children}
    </GlobalContext.Provider>
  );
};

关键说明 #

• LocalStorage仅支持字符串存储，因此存入时用JSON.stringify转换数组，读取时用JSON.parse还原为数组。
• useEffect的依赖项设为state.contacts，确保只有当数据实际变化时才触发存储，避免无效执行。
• 初始化逻辑兼容原有空数组场景，无缓存时自动使用空数组作为初始值。

修改完成后，添加、编辑、删除联系人的操作都会自动同步到LocalStorage，页面刷新后数据不会丢失。

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