0

I have an HTML form. I am filling it partially with data. I want to do a few things to protect the data that was filled and I don't know what is the best solution.

  1. If the user accidentally presses the close button of it's browser, the filled data is lost
  2. If the user accidentally presses on a link inside the webpage, he will lose the filled data
  3. If the user clicks on the refresh button, he may lose that data (Chrome and Firefox shows an alert to inform you that you are about to lose data if you refresh the webpage)

What is the best way to protect the data from the form?

I was thinking that if the user makes one of those three actions, a window should appear and inform him about the action that will take place.

JJJ
  • 32,902
  • 20
  • 89
  • 102
tzortzik
  • 4,993
  • 9
  • 57
  • 88
  • 2
    possible duplicate of [How to display onbeforeunload dialog when appropriate?](http://stackoverflow.com/questions/2663728/how-to-display-onbeforeunload-dialog-when-appropriate) – Alex K. Jun 27 '13 at 15:28
  • You cannot react on pressing the close button. If the user shuts down the browser (intentionally or not), it just shuts down. – Bergi Jun 27 '13 at 15:29
  • @AlexK. I already saw the provided link but I was wondering about the other two problems. Refresh is protected by browser but the main problem is the close button. It happened so many times to accidentally close the windows. – tzortzik Jun 27 '13 at 15:32

1 Answers1

2

What is the best way to protect the data from the form?

A more userfriendly way than showing warning messages would be just to autosave the data and not letting it get lost. On every input action, store the form values in the localStorage. When the form is loaded empty, restore them. When the form is submitted [successfully], clear them.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375