我如何做一个react应用程序，在刷新时保留数据

Question

我在react上建立了一个简单的费用跟踪应用程序，就像这样

我现在如何使expenselog对象避免在刷新时恢复到默认状态，但保留客户端添加的新费用

import { useState } from 'react';
function App() {
var [expenselog,setExpenselog] = useState([
{
name: "Expense1",
amount: 1000
},
{
name: "Expense2",
amount: 100
}
]);
var [count, setCount] = useState(0);
var [name, setName] = useState("");
const inputChangeHandler = (e) => { 
setName(e.target.value);
}
const inputChangeHandler2 = (e) => { 
setCount(e.target.value);
}

const clickHandler = () => { 
if (name === "" || count === "" || count <= 0) {
alert("Please enter a name and amount");
} else {
setExpenselog([...expenselog, {name: name, amount: count}]);
document.querySelector('.inputField').value = "";
document.querySelector('.inputField2').value = 0;
setCount(0);
setName("");
}
}
var sum=0;
for (var i = 0; i < expenselog.length; i++) {
sum = parseInt(sum) + parseInt(expenselog[i].amount);
}
return (
<div className="App">
<input onChange={inputChangeHandler} className='inputField'/>
<input type={"number"} onChange={inputChangeHandler2} className='inputField2'/>
<button onClick={clickHandler}>Add Expense</button>
<br/>
<h1>Total money spent : {sum}</h1>
{expenselog.map(expense => <p>{expense.name} - {expense.amount}</p>)}
</div>
);
}
export default App;

Answer 1

在localStorage或sessionStorage之间进行选择。
localStorage可以在选项卡之间共享，并且在关闭选项卡时将持续存在。
sessionStorage不能在制表符之间共享。当你关闭标签页时，它会消失。