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

Question

I have an array items[] in which I am inputting 4 keys with values coming from input box.

I now have the values in the array but on page refresh the values are reset, So I was thinking of using localStorage for this i tried -

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

and for retrieving it i tried -

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

But this doesn't seem to be working, the values are still disappearing after refresh

new code-

 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

You need to check a condition before set the values in localstorage . like,

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

Because when you refresh your page. on load function may clear the array and set that empty array values into the local storage again.

Edit:

You can do it by using a global flag variable as IsNewData . When you submit new data set IsNewData == true and do IsNewData == false after completion of submitting. Also add the additional condition in the if statement :)

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