CODEWITHSUNDEEP
node.jsreactjsjson
Vayun
Vayun

Reputation: 91

How do I make a react app that preserves the data on refresh

I've built a simple expense tracker app on react like such

How do I now make it such that the expenselog object avoids reverting back to the default state on refreshing but preserves the new expenses that were added by the client

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;

Upvotes: 0

Views: 87

Answers (1)

Jae
Jae

Reputation: 556

Select betweeon localStorage or sessionStorage.
localStorage can be shared between tabs, and will persist if you close the tab.
sessionStorage can not be shared between tabs. When you close tab, it will disappear.

Upvotes: 1

Related Questions