How to write value to localStorage and display it in input on reload?-CodePudding

I have an input on the page, initially it is empty. I need to implement the following functionality: on page load, the component App fetches from localStorage a value of key appData and puts it in the input. That is, so that in the localStorage I write the value to the input and when reloading it is displayed in the input. How can i do this? I need to use useEffect

import { useEffect, useState } from "react";

export default function App() {
  const [userData, setUserData] = useState("");
  useEffect(() => {
    localStorage.setItem("Userdata", JSON.stringify(userData));
  }, [userData]);

  return (
    <div>
      <input value={userData} onChange={(e) => setUserData(e.target.value)}></input>
    </div>
  );
}

CodePudding user response：

Use the change event to write to the localStorage, then use an init function in the useState hook.

import { useState } from 'react';

const loadUserData = () => localStorage.getItem('UserData') || '';
const saveUserData = (userData) => localStorage.setItem('UserData', userData);

export default const Application = () => {
  const [ userData, setUserData ] = useState(loadUserData);
   
  const handleUserDataUpdate = e => {
    const userData = e.target.value;
    setUserData(userData);
    saveUserData(userData);
  }
  
  return <div>
    <label htmlFor="testInput">Test Input</label>
    <input id="testInput" value={ userData } onChange={ handleUserDataUpdate } />
  </div>;
}

If you need an example using uncontrolled inputs, here is one using useEffect :

import { useEffect, useState } from 'react';

const loadUserData = () => localStorage.getItem('UserData') || '';
const saveUserData = (userData) => localStorage.setItem('UserData', userData);

export default const Application = () => {
  const inputRef = useRef();
  
  useEffect(() => {
    inputRef.current.value = loadUserData();
  }, []);  // initial load
  
  const handleUpdateUserData = () => {
    saveUserData(inputRef.current.value);
  };
 
  return <div>
    <label htmlFor="testInput">Test Input</label>
    <input ref={ inputRef } id="testInput" onChange={ handleUpdateUserData } />
  </div>;
}

CodePudding user response：

You can set a default value for the input inside state.

const [userData, setUserData] = 
   useState(JSON.parse(localStorage.getItem('Userdata')) || '');

So when the component mounts (after reload), the initial userData value is taken directly from the localStorage. If it's empty, the fallback value will be set ('').

Note: Make sure to add also the onChange handler to the input.