Forms on the web are awesome:
They’re one of the first instances of web interactivity. Before we had Jquery, JavaScript, or Flash, we had forms, and post requests.
Forms walked, so 1.2MB JavaScript bundles could run
Mykal Machon, 2022
Forms are 100% native to the web and are a tried-and-true way to collect input from users: whether you stick to the originally intended POST-data-to-action on submit, or something javascript enhanced like submitting the data via fetch, they sort of just work.
That said, forms don’t have all the bells and whistles out of the box, One of those missing bells and whistles is autosave
Do we need Autosave, though?
Well, not always!
Until recently, it hadn’t occurred to me that you really would need autosave in your forms; there are many other ways to persist user input.
To name a few:
- Write user data to a database in real-time: similar to how apps like Notion, or Google docs handle things.
- Keep forms short: users shouldn’t spend a significant amount of time filling a form out
And those seem like valid, wholistic strategies until you think about:
Working Offline
I’m working on a web app for one of my consulting partners. The app is typically used on phones in locations with less than ideal wireless connections.
Picture this:
- You’re working on-site, filling out a web-based inspection form.
- You fill out a few inputs, but you lose signal halfway through; you don’t notice.
- You open your phone 5 minutes later and notice that your browser has reloaded the page in the background.
- You just lost all the data in your form! 😔
Admittedly I never even considered this when building the app. I just assumed the best. In cases like these, autosave can be a lifesaver!
Solving Autosave!
Luckily, browsers and modern JavaScript make autosave pretty easy to implement 🥳
The solution I ended up going with uses something called IndexedDB: which is a fancy key-value database, that’s designed to be very fast, with lots of data.
I created a little NPM package called FormStore to make it easy!
Hey 👋🏻
I’m working on a more technical walk-through of this now; I just wanted to get my thought process out first. If you’re seeing this and read the whole way through, thanks!