Local storage is great because you can save data on the browser for web apps without the need for hosting (and paying for!) a database. Here's why we used it for Bee, a citizen science mobile app and entry to the 2023 Dev x GitHub Hackathon.
About the app
Bee app allows a BeeWalk citizen scientist to walk a survey outdoors, and record walk data including any sightings of bumblebees on their phone. Using the geolocation of the user, the app can fetch the real-time weather as well as the time the survey starts and ends.
Persistence
Local storage is perfect for the small amounts of data citizen scientists collect on each walk.
localStorage persists data client-side after you close your browser tab, therefore the app saves data for a single field survey, this is useful for saving and displaying the data during the survey on a mobile device, and then being able to recall the data later to input into the recording submission system of the survey scheme.
This reproduces the behaviour of recording your survey on a paper form, entering the data in the submission system, then discarding the used form.
Field portability
Being lightweight means users will use less storage and compute while in the field - that's important because you need the app to respond quickly during a survey, and you don't want to drain your device's power while you're away from any charger. It's not possible to stop-and-start your walk, or wait to re-charge your phone during a survey, as that will compromise the quality of your scientific data. Local storage is reliable if you go off-line - you can still access it to use without internet access, which is useful in the field!
Coding visibility
It's easy to see what data you've stored, using Chrome browser inspect developer tool, the local storage contents are saved as key value pairs and viewed in the 'Application' tab:
You can clear the saved data in the Inspect tool GUI or within your app code using localStorage.clear(). Data being passed to storage for a bee survey doesn't need to be secured, so there's no need to obfuscate data here.
Read more about localStorage in the MDN web docs
Top comments (0)