React TodoList实现按页面分类存储LocalStorage任务的方案

核心思路是为不同页面的任务分配独立的LocalStorage键名，避免数据混淆。具体实现步骤如下：

1. 修改NewAchieve组件，接收页面标识参数 #

让组件通过props获取当前页面的任务列表标识（比如"general"或"urgent"），用这个标识拼接LocalStorage的键名：

function NewAchieve({ listKey, inputText, add_btn }) {
    // 根据传入的listKey生成唯一的LocalStorage键
    const storageKey = `${listKey}_tasks`;
    
    // 读取对应键的任务数据
    const oldTasks = localStorage.getItem(storageKey);
    const [tasks, setTasks] = useState(JSON.parse(oldTasks) || []);
    const [newTask, setNewTask] = useState("");

    // 保存时使用对应键
    useEffect(() => {
        localStorage.setItem(storageKey, JSON.stringify(tasks));
    }, [tasks, storageKey])

    // 处理输入变化
    function handleInputChange(event) {
        setNewTask(event.target.value);
    }

    // 添加任务（过滤空内容）
    function addTask() {
        if (!newTask.trim()) return;
        setTasks(t => [...t, newTask]);
        setNewTask("");
    }

    return (      
        <>         
            <input className="inputAdd" type="text" placeholder={inputText} value={newTask} onChange={handleInputChange} />   
            <button className="addBtn" onClick={addTask}>{add_btn}</button>
            <div>
                {tasks.map((task, index) => 
                    <div className="btnChip" key={index}>
                        <Chip>{task}</Chip>
                    </div>
                )}
            </div>
        </>    
    )
}

export default NewAchieve;

2. 在路由页面中传入对应标识 #

在General和Urgent页面组件中，使用NewAchieve时传入不同的listKey：

General页面示例： #

import NewAchieve from './NewAchieve';

function GeneralPage() {
    return (
        <div>
            <h1>General Tasks</h1>
            <NewAchieve listKey="general" inputText="添加常规任务" add_btn="添加" />
        </div>
    );
}

export default GeneralPage;

Urgent页面示例： #

import NewAchieve from './NewAchieve';

function UrgentPage() {
    return (
        <div>
            <h1>Urgent Tasks</h1>
            <NewAchieve listKey="urgent" inputText="添加紧急任务" add_btn="添加" />
        </div>
    );
}

export default UrgentPage;

3. 额外优化建议 #

• 键名统一维护：可以把页面标识放到单独的常量文件中，避免拼写错误，比如：

  // constants.js
  export const LIST_KEYS = {
      GENERAL: "general",
      URGENT: "urgent"
  };
  

  页面中导入使用：listKey={LIST_KEYS.GENERAL}
• 任务去重：如果需要，可以在addTask中判断任务是否已存在，避免重复添加

修改完成后，General页面的任务会存储在general_tasks键下，Urgent页面的任务存储在urgent_tasks键下，数据完全独立，不会互相干扰。

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