无法在 localStorage 中保存超过 2 个项目答案

【问题标题】：Cannot save more than 2 items in localStorage无法在 localStorage 中保存超过 2 个项目
【发布时间】：2021-02-25 09:05:45
【问题描述】：

我正在尝试将本地存储中的项目保存为对象数组。起初它工作得很好，并根据我的需要将第一个元素存储在本地存储中，但我不能存储多个元素。

这里是启动本地存储的代码块。

在这个块中，我从不同的组件接收一个项目作为对象并为其分配一个 ID。之后，我更新状态并存储这个对象。

 const saveEdit = (obj) =>{
        const text = obj.article;
        const id =  Date.now().toString(36) + Math.random().toString(36).substr(2);
        let article = { id: id, text:text}
        setSavedArticles([...savedArticles,article])
        localStorage.setItem('article', JSON.stringify(savedArticles));
        
      }

第一项存储为文章：[{item}]
我想要做的是每次收到一个新项目时更新本地存储 文章：[{item},{item} ...]

我正在使用 onClick 功能从另一个组件发送信息。

 <button
  onClick={() => saveEdit({
    article: textArea.current.value
  })}
   className="button mt-4">
      Save
 </button>

【问题讨论】：

标签： javascript reactjs local-storage

【解决方案1】：

问题是在 React 中设置状态是一个异步过程。这意味着，您保存已保存文章的先前值，而不是更新的值。你应该像这样创建一个新变量：

const newArticles = [...savedArticles,article]

然后更新状态和本地存储：

setSavedArticles(newArticles)
localStorage.setItem('article', JSON.stringify(newArticles));

【讨论】：

【解决方案2】：

savedArticles 不会立即更新，因为 react 会异步更新状态。

 const saveEdit = (obj) =>{
        const text = obj.article;
        const id =  Date.now().toString(36) + Math.random().toString(36).substr(2);
        let article = { id: id, text:text}
        const newSavedArticles = [...savedArticles,article]
        setSavedArticles(newSavedArticles )
        localStorage.setItem('article', JSON.stringify(newSavedArticles ));
        
      }

【讨论】：