时间戳

首页 > 解决方案 > 无法在 localStorage 中保存超过 2 个项目

javascript - 无法在 localStorage 中保存超过 2 个项目

问题描述

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

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

在这个块中，我从不同的组件接收一个项目作为对象并为其分配一个 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));
        
      }

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

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

标签： javascriptreactjslocal-storage

解决方案

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

const newArticles = [...savedArticles,article]

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

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

推荐阅读