superLocal: making localStorage more useful


HTML5 presents web developers with many features that are easy to get excited about. One of the coolest features is localStorage, and it’s essential for the new generation of “web-apps” that is cropping up. LocalStorage allows a website or web-app to save data to a user’s device in a far more convenient and robust way than something like cookies. Most browsers allow a domain up to 5MB or localStorage, which is more than enough for things like to-do lists.

Out of the box, however, localStorage can seem a bit neutered. It’s a simple key-value store. For users who are used to the convenience of a relational database like MYSQL, it can be a bit challenging to use localStorage in a dynamic way.

What if you want to find the oldest record? What if you want to remove the largest one?

LocalStorage simply leaves you to your own devices. This prompted me to write a small JavaScript library that makes localStorage much more useful.

Enter superLocal. superLocal allows a web developer to do several neat things, easily. When you save a record to localStorage, superLocal automatically creates associated “created” and “modified” timestamps, which are immensely helpful. Doing something like finding the newest record is now possible with one small piece of code:


superLocal also has a convenience method that evaluates the length of the string stored in localStorage, which makes it a snap to do something like find the biggest record:


superLocal also has some other helpful tools like allowing you to clear localStorage, or test to see if a user’s browser supports localStorage at all.

Some of the things that superLocal does are just simple wrappers for what are already simple JavaScript methods, but it’s the integration with superLocal’s created and modified timestamps that makes it so powerful. Everything works together to create a simple, but flexible, database.

If you’re building a website or web-app that will be saving data to localStorage, give superLocal a try!

superLocal is available on GitHub. Comments and pull requests welcome!

jib strategic is a marketing agency in Toronto. We are graphic design specialists. We are also adversiting experts. Kings of branding and identity. Champs of social relevance and seo.