How to use React (this.state) to achieve user input save automatically - reactjs

Question

I use react-quill made a rich text editor. I want to use this.state to store data, so that the content of input text box can be automatically saved, and the text input will not disappear after refreshing the page.
The code is for react-quill,How to modify the code to achieve my goal
import React from 'react'
export default class Editor extends React.Component {
constructor (props) {
super(props)
this.state = {
editorHtml: '',
}
this.handleChange = this.handleChange.bind(this)
if (typeof window !== 'undefined') {
this.ReactQuill = require('react-quill')
}
}
handleChange (html) {
this.setState({ editorHtml: html });
}
render() {
const ReactQuill = this.ReactQuill
if (typeof window !== 'undefined' && ReactQuill) {
return （
<div className='app'>
<ReactQuill
onChange={this.handleChange}
value={this.state.editorHtml}
modules={Editor.modules}
formats={Editor.formats}
/>
)
} else {
return null;
}
}
}
Editor.modules = {
toolbar: [
[{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
[{size: []}],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{'list': 'ordered'}, {'list': 'bullet'},
{'indent': '-1'}, {'indent': '+1'}],
['link', 'image', 'video'],
['clean']
],
clipboard: {
matchVisual: false,
}
}
Editor.formats = [
'header', 'font', 'size',
'bold', 'italic', 'underline', 'strike', 'blockquote',
'list', 'bullet', 'indent',
'link', 'image', 'video'
]

Answer 1

Where should your data be saved?
You don't mention a backend service so I'm not sure where you want to save this data. Since a react runs fresh on every page refresh you cannot store data only retrieve it from either an api or local storage.
local storage
If you would like to store data in local storage you will need to hydrate your app when it loads. This is the process of looking into the local storage and retrieving data for use. Note that this data will only be accessible from the machine & browser its written on and no good if you want to post this to other platforms.
API
If you wish to store your data in "the cloud" for later retrieval you should make an api to handle post and get requests. these will let you save data to a connected cloud database. In this case when called componentDidMount you can retrieve the previous sessions data with a get request.
Lambda functions
Similar to an api you can write "serverless" functions to handle data. firebase functions is a good place to start there, they are easy to understand and write in a few minutes.
Conclusion
All of these solutions will take quite a bit of time to put together, there's no "easy" way to just store and retrieve data outside of using some 3rd party service or setting up your own server & database.

Answer 2

Where you want to store data is the main question. If you are saving it to database and have an endpoint for getting the data. Let`s say "http://localhost:3001/api/form/data".
Make a request to the endpoint and set state after getting data in componentDidMount method of React, like this:
componentDidMount(){
fetch("http://localhost:3001/api/form/data")
.then(res=>res.json())
.then(data=>{
if(data){
this.setState.({editorHtml : data});
}
}).catch(ex){
//handle error here
}