Question

我有一个数组项[]，其中我输入的4个键的值来自输入框。

我现在拥有数组中的值，但是在页面刷新时，值被重置，所以我在考虑使用localStorage这个我试过 -

  localStorage.setItem("test", JSON.stringify(items));

并且为了检索它我试过 -

var retrievedData = localStorage.getItem("test");
var test2 = JSON.parse(retrievedData);

但这似乎不起作用，刷新后值仍然消失

新代码 -

import React, { Component } from 'react';
import { Table } from 'reactstrap';

class Tab extends React.Component {

  render() {
    const items = this.props.items;

    items.sort((a,b) => {
        const name1 = a.name.toLowerCase(), name2 = b.name.toLowerCase();
        return name1 === name2 ? 0 : name1 < name2 ? -1 : 1;
    });

  localStorage.setItem("test", JSON.stringify(items));
  var retrievedData = localStorage.getItem("test");
  var test2 = JSON.parse(retrievedData);

  return (

      <Table striped>
             <thead>
               <tr>

                 <th  >Name</th>
                 <th>Origin</th>
                 <th>Destination</th>
                 <th>Seats</th>

               </tr>
             </thead>
             <tbody>
             {test2.map(item => {
  return (

               <tr>

                 <td>{item.name}</td>
                 <td>{item.origin}</td>
                 <td>{item.destination}</td>
                 <td>{item.seats}</td>

               </tr>
             );
           })}

             </tbody>
           </Table>

    );
  }
}


export default Tab;

Answer 1

您需要在localstorage中设置值之前检查条件。等，

if(localStorage.getItem("test") === undefined)
{
localStorage.setItem("test", JSON.stringify(items));
}

因为刷新页面时。 on load函数可以清除数组并再次将该空数组值设置到本地存储中。

编辑：

您可以使用全局标志变量IsNewData来完成此操作。在提交完成后提交新数据集IsNewData == true并执行IsNewData == false时。还要在if语句中添加附加条件:)

if(localStorage.getItem("test") === undefined ||  IsNewData)
{
localStorage.setItem("test", JSON.stringify(items));
}

在React中将数组存储到localstorage中

1 个答案:

编辑：