如何将数组中新条目保存到localStorage？若失效能否存入db.json？

一、修复localStorage保存后刷新丢失的问题 #

你的代码里localStorage未生效的核心原因是：组件挂载时会优先请求db.json的数据并覆盖state，同时把原始数据存回localStorage，导致之前新增的内容被覆盖。按以下步骤修改：

1. 初始化state时优先读取localStorage
   把useState的初始化逻辑改为从localStorage读取已有数据，无数据则用空数组：

   const [playLists, setPlayLists] = useState<PlayListValues[]>(() => {
     const savedPlaylists = localStorage.getItem("playLists");
     return savedPlaylists ? JSON.parse(savedPlaylists) : [];
   });
   

2. 调整axios请求逻辑，避免覆盖localStorage数据
   仅当localStorage无数据时，才从db.json加载初始数据，并将初始数据存入localStorage：

   useEffect(() => {
     if (playLists.length === 0) {
       axios.get(`http://localhost:3000/playList`)
         .then((res) => {
           const initialData = res.data;
           setPlayLists(initialData);
           localStorage.setItem("playLists", JSON.stringify(initialData));
         })
         .catch(err => console.debug(err, "error"));
     }
   }, [playLists.length]);
   

3. 保留自动同步localStorage的逻辑
   原有的监听playLists变化并保存到localStorage的useEffect可以保留，确保新增条目时自动同步：

   useEffect(() => {
     if (playLists.length > 0) {
       localStorage.setItem("playLists", JSON.stringify(playLists));
     }
   }, [playLists]);
   

二、关于将新增数据存入db.json的问题 #

如果你的db.json是通过json-server启动的模拟后端，可以通过POST请求将新增数据写入db.json，实现持久化：

1. 修改addPlayList函数，新增POST请求

   const addPlayList = async () => {
     if (newList) {
       let num = playLists?.length + 1;
       let newEntry = { id: num, title: newList, songs: [] };
       // 先更新本地state
       const updatedPlaylists = [...playLists, newEntry];
       setPlayLists(updatedPlaylists);
       // 发送POST请求到json-server，写入db.json
       try {
         await axios.post(`http://localhost:3000/playList`, newEntry);
       } catch (err) {
         console.debug(err, "Failed to save to db.json");
         // 请求失败时可根据需求回滚state或提示用户
       }
     }
   };
   

2. 注意事项

   • 若只是静态的db.json文件（无后端服务），前端无法直接修改本地文件，这种情况下无法将新增数据存入db.json，只能依赖localStorage或其他前端存储方案。
   • 使用json-server时，db.json的修改会持久化，除非手动重置文件内容。

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