Local Storage as a Temp Backup

So ideally what i want is a window event listener to have a alert pop up and warn a users that they have unsaved data if they exit, refresh, or go back. My app is a Material request form with a good amount of information. And it is very easy to accidently close a tab when you have many open or even more common if you mouse has a go back button and you click that. I have a issue of some people doing that and loosing their current data.

My work around since i can't have the window event listener in retool is to save my variables that the app uses to local storage every 30 seconds are so. And on a submit i will erase the data. But if the user exits and looses their data they can reopen it and have a pop up showing their was unsaved data that they can restore from local storage.

I wanted to get thoughts on this solution before implementing it. Does anyone have any better ideas or thoughts on this solution?

One area i am thinking of is how to identify the difference when multiple tabs are open as well as to show the right back up data...