时间戳

首页 > 解决方案 > 在 React 中将数组存储到本地存储中

javascript - 在 React 中将数组存储到本地存储中

问题描述

我有一个数组 items[]，我在其中输入 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;

标签： javascript

解决方案

您需要在设置值之前检查条件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));
}

推荐阅读