Make disaster-proof HTML5 forms

This article first appeared in issue 225 of .net magazine – the world's best-selling magazine for web designers and developers.

How many times have you been in the middle of meticulously typing information inside a form and – BAM! – the browser crashed? I bet 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 (something I’ve been guilty of myself at times).

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. One great (and easy) way to do this is to make sure that whatever the user has spent time and effort typing into your app is saved locally.

That way, even if the browser crashes or the tab gets accidentally closed, the information is still there when the user revisits the page later on.

There are a number of technologies people can use to store data offline. Until recently, people used to use cookies. However, there are certain problems associated with the use of cookies. They’re typically only allowed to store a few KBs of data. There isn’t any programmatic API to access them. And overall, they’re a bit of a pain to use.

For this reason, in this tutorial we’ll be using the Web Storage API and more specifically, localStorage, to store data on the client side.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.