CODEWITHSUNDEEP
javascriptreactjslocal-storage
koko
koko

Reputation: 19

how to get data from localStorage on page reload

I'm trying to make a savable note with React and localStorage. Whenever 'Save' is clicked, it should save the value in the textarea to localStorage, and whenever 'Clear' is clicked, it should clear the textarea and the data from localStorage.

import { useState } from "react";
import "./App.css";

function App() {
  const storage = window.localStorage;
  const [text, setText] = useState('');
  const data = storage.getItem('text');

  return (
    <div className="App">
      <div className="box">
        <div className="field">
          <div className="control">
            <textarea
              className="textarea is-large"
              placeholder="Notes..."
              value={data}
              onChange={(e) => setText(e.target.value)} />
          </div>
        </div>
        <button
          className="button is-large is-primary is-active"
          onClick={() => storage.setItem('text', text)}>Save</button>
        <button
          className="button is-large"
          onClick={() => {storage.removeItem('text'); setText('')}}>Clear</button>
      </div>
    </div>
  );
}

export default App;

It works as supposed, except, when I click 'save', I can't type or delete anything in the textarea. Also, when I click 'clear' it clears the box only after I reload the page.

How can I fix this?

Upvotes: 1

Views: 193

Answers (2)

Rukshan Jayasekara
Rukshan Jayasekara

Reputation: 1985

In the textArea element you have to assign the "value" as your "text" state.

<textarea
     className="textarea is-large"
     placeholder="Notes..."
     value={text} // --> here
     onChange={(e) => setText(e.target.value)} />

See here: Working example

Upvotes: 2

Houssam
Houssam

Reputation: 1877

First, you should set the value of the textarea using the state variable text, otherwise you cannot edit it anymore once you click save. This is because the value on the local storage stays the same when you type, thus making it impossible to update the value.

Second, you need to initialize the state variable text to the value that you have in the local storage if there is any. Otherwise, it will always be empty when you refresh.

The code to apply both of these changes is the following:

function App() {
  const storage = window.localStorage;
  const data = storage.getItem('text');
  const [text, setText] = useState(data ?? '');

  return (
    <div className="App">
      <div className="box">
        <div className="field">
          <div className="control">
            <textarea
              className="textarea is-large"
              placeholder="Notes..."
              value={text}
              onChange={(e) => setText(e.target.value)} />
          </div>
        </div>
        <button
          className="button is-large is-primary is-active"
          onClick={() => storage.setItem('text', text)}>Save</button>
        <button
          className="button is-large"
          onClick={() => {storage.removeItem('text'); setText('')}}>Clear</button>
      </div>
    </div>
  );
}

export default App;

Upvotes: 3

Related Questions