Make Disaster-Proof HTML5 Forms

How many times have you been in the middle of meticulously typing information inside a form and – BAM! – the browser crashed? Shwetank Dixit bets it’s happened a few times at least. And when it has, you’ve had to open the browser, go to the URL again and enter all that information one more time – hoping the browser doesn’t crash again a few minutes later. Various things can and do go wrong every day when filling in online forms. The browser may crash, your internet connection can barf at the wrong moment (especially on dial-up or flaky Wi-Fi), or you could even accidentally close the page yourself.

Web builders should be looking at ways to ease the pain of the disgruntled user in such situations and to make their experience as painless as possible. There are a number of technologies people can use to store data offline. The W3C Web Storage API defines a new way to store data on the client side, in key-value pairs. The API defines two storage mechanisms, localStorage and sessionStorage. The latter deals with storing data on the client side just for one particular session. As soon as you close the tab or window, the info is gone. However, Shwetank Dixit is more interested in storing information in a persistent way. This is where localStorage comes in. As localStorage is persistent, data stored is available even after the user has closed the tab or window. This means the next time a user loads your web application, the information will still be available for the application.