单击按钮时如何从本地存储中删除多维数组？

Posted 2023-03-23

【中文标题】单击按钮时如何从本地存储中删除多维数组？

【英文标题】：How do you delete a multidimentional array from localstorage on button click?

【发布时间】：2021-12-15 07:51:39

【问题描述】：

在我的表上，当输入一个值时，它作为一个二维数组存储到 localstorage 并映射到一个新的单独行上的表。创建新行时，它也有自己的删除按钮。当单击该删除按钮时，该按钮所在的特定行将被删除。

一个例子是[['hello', 'hi', 'hey'], ['bye', 'goodbye', 'cya']];第一个嵌套数组将它包含的 3 个数据映射到一行，第二个嵌套数组映射到下一行。如果我想删除第一行，我会单击删除按钮，这将导致第一个嵌套数组被删除，从而导致第一行被删除。

由于该表基于本地存储，因此我需要删除该特定数组但保留其他数组。我想我可以通过获取嵌套数组索引并删除它来实现这一点。现在我不确定是否需要使用.splice() 或其他方法？这是我使用的方法，但没有奏效：

const getData = [JSON.parse(localStorage.getItem('pls'))];

const tableDatas = [...getData];

 const handleSingleDelete = (index) => 
   //what do I place here? I tried this:
   getItem.splice(index, 1)

...
return(
    <Table className="tablesorter" responsive id="maintb">

    <tbody id="tbid">
                    (tableDatas.map((l,i) => (
                      <tr key=`$l+i` id=`$i`>
                          <td>tableDatas[i][1]</td>
                          <td>tableDatas[i][2]</td>
                          <td>tableDatas[i][3]</td>
                          <td>
                          <Button onClick=handleSingleDelete>Delete
                          </Button>
                          </td>
                       </tr>
             </tbody>
    <Table>
)

【问题讨论】：

Spice 是一个不错的选择。但是您没有说明您是否已采取措施更新 localStorage 和应用程序状态。除非你做这些事情，否则这不会起作用。

【参考方案1】：

您应该在每次想要对其进行更改时从localStorage 获取数组，因为您总是需要最新的数据，首先调用它将始终具有相同的数组，并且将来对本地存储的任何更改都会在您再次调用它之前不会在变量中更新。

先把它带入函数中，然后把你要的索引去掉再解析保存到localstorage：

编辑： 为了呈现数据，可以使用useState，并在每次删除时更新它。

const localStorageName = "pls";
const [arrData, setArrData] = useState(JSON.parse(localStorage.getItem(localStorageName)))

const handleSingleDelete = (index) => 
        const currentArray = JSON.parse(localStorage.getItem(localStorageName));
        currentArray.splice(index, 1);
        localStorage.setItem(localStorageName, JSON.stringify(currentArray))
        setArrData(() => currentArray)
    

现在使用这个arrData 循环进入组件并始终呈现最新的数据。

【讨论】：

如何获取动态行索引并将其传递给函数？这样我就可以删除具有相同索引的数组。

我编辑了答案，希望对你有用

【参考方案2】：

感谢 woohaik 和一些修改，我通过这样做得到了结果：

    const localStorageName = 'pls';
    const [arrData, setArrData] = useState(JSON.parse(localStorage.getItem(localStorageName)))

    function handleSingleDelete(e,i)
      //gets array from localstorage
      //Splices it via index of specific row
      //sets modified array as new array and deletes it from rendered view.
      const currentArray = JSON.parse(localStorage.getItem(localStorageName));
      currentArray.splice(i, 1);
      localStorage.setItem(localStorageName, JSON.stringify(currentArray))
      setArrData(() => currentArray)
    
...
return(
                    (tableDatas.map((l,i) => (
                      <tr key=`$l+i` id=`$i`>
                          /*<td>i</td>*/
                          <td>tableDatas[i][2]</td>
                          <td>tableDatas[i][0]</td>
                          <td>tableDatas[i][3]</td>
                          <td>tableDatas[i][1]</td>
                          <td>Idle</td>
                          <td>
                          <Button onClick=e => handleSingleDelete(e, i)>Delete
                          </Button>
                          </td>
                      </tr>
...
);