How to store into the local storage ? (REACT)

user_10437384 0
Viewed 2759

I have a question for you... On my react app, I have a <input></input> but I would like the user to be able to keep his message thanks to the local storage.

class Profil extends Component {
    message() {
        if (localStorage != 'undefined'){
            document.getElementById('message').value = localStorage.getItem('message');
        }
        else {
            alert("localStorage is not supported");
        }
    }
    render() {
        return (
            <div>
                <input name="message" onChange={() => this.message()}></input>
            </div>
        );
    }}

With that, when I put a letter, I have directly an error message :

TypeError: localStorage.getItem(...) is null

and this line is false :

document.getElementById('message').value = localStorage.getItem('message');

What do I have to do ?

reactjs local-storage input
2 Answers

Instead of manipulating the DOM manually, you could keep the message in state and update the localStorage value on every change, and also read the value from localStorage when the component is created.

Example

class Profile extends React.Component {
  constructor() {
    super();
    this.state = {
      message: localStorage.getItem("message") || ""
    };
  }

  onChange = event => {
    const message = event.target.value;

    localStorage.setItem("message", message);
    this.setState({ message });
  };

  render() {
    return <input value={this.state.message} onChange={this.onChange} />;
  }
}
user_36178860

In functional component in the following way we can able to store and restore the values from localstorage using useEffect hook

const mounted = useRef()
const [ formValues, setFormValues ] = useState({firstname: '', lastname: ''})

function supportsLocalStorage() {
    try {
        return 'sessionStorage' in window && window['sessionStorage'] !== null;
    } catch(e){
        return false;
    }
}

useEffect(() => {
    if (!mounted.current && supportsLocalStorage) {
        const progress = JSON.parse(localStorage.getItem('formValues'))
        if (progress !== null) {
            for (const x in formValues) {
                formValues[x] = progress[x]
            }
        }
        mounted.current = true
    } else {
        const filteredState = formValues
        localStorage.setItem('formValues', JSON.stringify(filteredState))
    }
}, [ formValues ])
user_46527060
Related