使用按钮向本地浏览器存储中添加/删除数据，并将其显示在UI表中（反应）

Question

我希望有一个使用本地存储来存储数据并在用户界面（UI）的表中显示该数据的React应用。

我希望能够通过单击按钮将条目提交到本地存储中（提交），然后通过单击另一个按钮（删除）来删除本地存储中的条目。

而且无论刷新本地浏览器后，本地存储中的任何数据我都希望将其显示在UI的小表中。

我已将本教程（https://www.robinwieruch.de/local-storage-react#local-storage-in-react）用作本地存储的基础，并在下面的教程中提供了我正在使用的代码。但是在本教程中，数据是通过在框中键入并在段落中显示来提交的。从开发人员工具中，我可以看到这仅适用于一对键值。

CODE：

import React from 'react';

const useStateWithLocalStorage = localStorageKey => {
  const [value, setValue] = React.useState(
    localStorage.getItem(localStorageKey) || ''
  );

  React.useEffect(() => {
    localStorage.setItem(localStorageKey, value);
  }, [value]);

  return [value, setValue];
};

const App = () => {
  const [value, setValue] = useStateWithLocalStorage(
    'myValueInLocalStorage'
  );

  const onChange = event => setValue(event.target.value);

  return (
    <div>
      <h1>Hello React with Local Storage!</h1>

      <input value={value} type="text" onChange={onChange} />

      <p>{value}</p>
    </div>
  );
};

export default App;

从本教程中，我相信数据将是：

已提交使用localStorage.setItem('myData', data)]进入本地存储

[Displayed

在表格中使用localStorage.getItem('myData')

已删除

使用localStorage.removeItem('myData')或localStorage.clear()]从本地存储/表中

我的猜测是，前面的每段代码都会在一个单独的函数中，并在return()中调用。

我在下面附上我要创建的内容，尤其是用户界面的外观：

使用SUBMIT按钮将数据提交到本地存储，使用表中的DELETE按钮将数据从本地存储中删除，而表中显示的所有内容均来自本地存储。

让我知道是否需要更多信息。有很多方法可以做到这一点，老实说，我不知道该怎么办。例如，如果我需要创建一个类，并且该类具有执行上述功能的多个函数（例如，一个用于提交的函数，另一个用于删除的函数以及一个用于从表中检索数据的函数）。

我希望有一个使用本地存储来存储数据并在用户界面（UI）中的表中显示该数据的react应用。我希望能够通过...

Answer 1

要将数组存储在localstorage中，请使用JSON.stringify，否则最终将存储逗号分隔的字符串

因此，需要更改自定义钩子的代码以使用JSON.stringify和JSON.parse