If the browser is accidentally closed, how does react cache the forms filled out by users?

This is an interview question ：

Crash in browser , power failure , Or manually close , How to cache incomplete forms that have been entered , After reloading the page, you can restore the entered data ？
Consider using react Realization , The focus of this issue is Code / The implementation level of logic , Don't consider the problems prompted by users for the time being

Q1：react did not keep-alive What are you doing ？
Q2：redux Caching at the browser level doesn't seem to work , I answered that the monitoring page is closed , Store data in localStorage in , Is there any other plan besides this ？
Q3： What are the application scenarios of this browser level cache ？
( From my shallow experience , There seems to be no such demand in the project ）

---

according to @_usw A hint of , I looked at the implementation of si no ：

Editing old questions ： It is on the input form （ For example, release problems ） Made an anti shake , There's one in the upper right corner In storage ..., Regularly submit the edited content to the remote , In storage Turn into Saved draft , If the page or browser is closed , and Cannot resume What has been edited

Edit new questions ： ditto , In addition, it also updates synchronously localStorage, It's also necessary to recover after the browser is closed localStorage The data of

I tried deleting localStorage And refresh / Close page / Close the browser , Then the page reloads , Neither of the above has a request for a draft （ It's really puzzling ）

---

Other answers 1：

register window.onunload event , Cache content locally , When the page is loaded, read the cache to see if there is any content

Other answers 2：

If the browser really crashes 、 Breakpoints and other unexpected situations , I feel that it is necessary to cache the data in advance , Every time the user fills in a part of the data, it will be cached .

Other answers 3：

I remember react There is no such thing , To implement it, it is just that the component actively sets the browser's local cache .
What else ,localStorage What is common is to save cookie, perhaps session

The most direct way of thinking is input Components are automatically persisted , The form container component has a globally unique ID Properties of and whether to automatically save properties ,input Components are placed inside the form container component , Then all of this form input Components will use this ID by key, Automatically save and restore the data in the input box at the appropriate time , If autosave is turned on , The form container component will have a real-time data status bar , Saving form data , The data of the form has been recovered , Then, if it is a logged in user , If the user allows privacy agreement , Key form data is backed up to the cloud , This requires adding a user selection page , Choose to compare whether to recover form data locally or from the cloud .