React: Permanently store user input as the value - reactjs

Question

I currently have the user input being updated by state and stored as the value however whenever the user directs to another page, closes the page or refreshes it, the value disappears. I want to permanently store the value there until the user changes their input.
Would I need to use persistent state for this? How can I permanently store the value of the user input until the user changes it?
class Planning extends React.Component {
constructor() {
super()
this.state = {
title: '',
goal: '',
tech: '',
features: '',
details: ''
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
})
}
handleSubmit(event) {
const {
title,
goal,
tech,
features,
details
} = this.state;
event.preventDefault();
this.setState({ title, goal, tech, features, details });
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div>
<label className="label-title">
Project Title:</label>
<input name="title" id="title" type="text" value={this.state.title} onChange={this.handleChange} required aria-required="true"/>
</div>

Answer 1

Change your handleChange function to:
handleChange(event) {
const { value, name } = event.target
localStorage[name] = value
this.setState({
[name]: value
})
}
and your constructor to:
constructor() {
super()
this.state = {
title: localStorage["title"],
goal: '',
tech: '',
features: '',
details: ''
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
This is not very elegant but will work. Alternatively you can save to localStorage on unmount.

Answer 2

Yes, you would have to manage this with a state management lib. Localstorage is too extreme. Plus the state management will come handy for other stuff in your app as it grows so i suggest you start right. You can look at mobx or redux.

Answer 3

Saving to localStorage is a synchronous operation , so we don't need to sync the local state to localStorage every time state variable changes as React already keeps the track of the application state in the user's session . You need to persist it in localStorage when user leaves page / refreshes. Save to localStorage on componentWillUnmount and window.onbeforeunload events. There is the a storage component that handles everything : https://github.com/ryanjyost/react-simple-storage