如何将切换标签保存到 React JS 中的本地存储？

Question

在我的previous question 中，当切换开关正常工作后，我询问是否有办法将其保留在那里，回答我问题的人告诉我使用本地存储。

就刷新问题而言，React 不会将数据持久化 刷新。例如，您可以使用 sessionStorage 来执行此操作，但我 如果您不认为这将更适合作为一个单独的问题 出来吧。

...如果您不希望数据被清除，请使用 localStorage 页面会话结束。

然后我开始研究本地存储以及如何在 React JS 中使用它。我尝试自己编写代码，但它最终变得非常复杂，而且我的代码非常混乱。

问题是，这个问题也与我的金钱追踪应用有关。基本上，被切换的文本是一个被切换的标签。

以下是我在docs on novem. 网站上编写的资金追踪应用文档的部分内容：

1. 第一个带有青色加号的栏称为输入栏。您添加了 8.00 美元之类的东西 - 买了一件衬衫和一个输出条（ 右侧带有 3 个按钮的栏）就是您所得到的 输入。

稍后...

1. 第一个，青色背景的，是已用过的按钮。简单来说，它会切换一个带有青色背景的标签 说用了。

2. 第二个，中间的按钮，是赢得按钮。它与已花费的按钮执行相同的操作，但不是花费的单词 它说赚了。

3. 最后一个是删除整个输出栏的删除按钮。

注意：如果你看到website可能会更好，因为它是一个非常短的页面。

React JS sn-p 我的代码

<div className="bar-tag-container">
        <li className={`todo-item ${todo.completed ? "completed" : ""}`}>
          {isSpent && <p className="tag">Spent</p>}
          {isReceived && <p className="tag">Earned</p>}
          <div className="others">{text}</div>
        </li>
      </div>

      <button
        onClick={(() => setIsSpent(!isSpent), handleClickSpent)}
        className="spent-btn"
      >
        <FaMoneyCheckAlt />
      </button>

      <button
        onClick={(() => setIsReceived(!isReceived), handleClickReceived)}
        className="receive-btn"
      >
        <FaDollarSign />
      </button>

Answer 1

根据您上一个问题的代码。

要设置onClick 输入的值，您可以在函数handleClick 中进行设置，如下所示：

import React, { useState } from "react";

const handleClick = () => {
    setShowText(!showText)
    localStorage.setItem('myText', showText);
}


const Test = () => {
    const [showText, setShowText] = useState(false);
    return (
        <React.Fragment>
            {showText && <h1>Hello World</h1>}
            <button onClick={() => handleClick}>Toggle</button>
        </React.Fragment>
    );
};