How to store into the local storage ? (REACT) - reactjs

Question

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 ?

Answer 1

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} />;
}
}

Answer 2

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 ])