javascript - 使用按钮将数据添加/删除到本地浏览器存储中，并将其显示在 UI 表格中 (React)

Question

我想要一个 React 应用程序，它使用本地存储来存储数据，并将该数据显示在用户界面 (UI) 的表格中。

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

无论本地存储中存在什么数据，我都希望即使在刷新浏览器后，它也能显示在 UI 中的一个小表格中。

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

代码:

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)提交到本地存储

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

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

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

我在下面附上了我想要创建的内容，特别是 UI 的外观:

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

如果需要更多信息，请告诉我。有很多方法可以做到这一点，老实说我不知道​​该怎么做。例如，如果我需要创建一个类，该类中具有多个函数来执行上述操作(例如，一个用于提交的函数，另一个用于删除的函数，一个用于从表中检索数据的函数)。

Answer 1

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

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

const useStateWithLocalStorageArray = localStorageKey => {  
  const [value, setValue] = React.useState(
    JSON.parse(localStorage.getItem(localStorageKey) || '[]' ) 
  );
  React.useEffect(() => {
    localStorage.setItem(localStorageKey, JSON.stringify(value))    
  }, [value]);
  return [value, setValue];
};

这里是 Plunker 的完整源代码 - https://plnkr.co/edit/NuSBnLpPpoOmmEE6