Autosave on the Web
Using native browser APIs to autosave HTML forms
Forms on the web are awesome:
Mykal Machon, 2022
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:
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.
- 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!
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!
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!
I'm Mykal Machon, I'm a web developer / coffee nerd from British Columbia, Canada. I'm currently working at the University of the Fraser Valley as a Systems Analyst.
Thanks for reading through this post! if you liked it, you can:
This post was liked by 0 people
Responses on this site are powered by Webmentions!