如何使用useEffect实现值写入localStorage并在页面重载时显示于input

现有代码存在的问题 #

• 页面加载时未从localStorage的appData键读取初始值，导致input始终从空值开始
• 存储数据时用的键是Userdata，和需求指定的appData不匹配
• 对input的字符串值使用JSON.stringify属于多余操作

修正后的代码 #

import { useEffect, useState } from "react";

export default function App() {
  // 组件首次加载时从localStorage读取appData，无值则设为空字符串
  const [userData, setUserData] = useState(() => {
    return localStorage.getItem("appData") || "";
  });

  // 每当userData变化，同步写入localStorage的appData键
  useEffect(() => {
    localStorage.setItem("appData", userData);
  }, [userData]);

  return (
    <div>
      <input 
        value={userData} 
        onChange={(e) => setUserData(e.target.value)}
      />
    </div>
  );
}

代码说明 #

• state初始化：用函数式初始化逻辑，只在组件第一次渲染时读取一次localStorage，避免重复执行读取操作
• useEffect监听：依赖数组里传入userData，只要输入框的值改变，就自动把最新值存入localStorage，保证页面重载后数据不会丢失
• 简化存储操作：input的value本身就是字符串类型，不需要用JSON.stringify序列化，直接存储即可

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