我有一个数组项[],其中我输入的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;
答案 0 :(得分:0)
您需要在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));
}