0

On the application I am working on, the state of all items is saved in the backend API database. The Vue state has a boolean to let the user know when the state is dirty (synced with backend) or not. So the user can hit ctrl + s and save whenever they make changes.

An issue I have is that when a user hits refresh, they could lose their work. So I implemented a feature to open a dialog to alert the user they're about to lose their work if they hit f5 when the state is dirty. This was done with the "beforeUnload" event listener.

But I also need security for the users work when they hit the back button.

I can detect it with this code:

                window.addEventListener("popstate ",  (e) => {
                
            });

But I can't figure out how to handle the event correctly and have the user cancel the pressing of the back button. Is this even possible?

Thanks.

BURGERFLIPPER101
  • 1,231
  • 4
  • 24
  • 41

1 Answers1

0

This is not reliably possible in browsers, regardless of the framework you are using; see https://stackoverflow.com/a/12381610/5471218 for a similar question.

That said, I strongly advise against interfering with the user's browser interaction that way. If you want to protect users from losing data, you could save it to local storage until you have confirmation that the data has been stored in the backend.

dr_barto
  • 5,723
  • 3
  • 26
  • 47