Taken at the Guggenheim Museum, NYC
The Echoplex

DOM Storage Query Language

Lately I’ve been experimenting a bit with HTML5 Web Storage (or DOM Storage) to see what it might be useful for.

If you’re not already familiar with web storage, basically, it’s the HTML5 way to store data locally on the browser without using cookies. It’s similar to cookies in that you can use it to pass data between pages. It’s different from using cookies because the data is not sent back to the server with every request, and the amount of data that can be stored is a lot larger: 5-10mb compared with about 4kb with cookies.

For a more detailed explanation on the different types of web storage and how they work I’d recommend you have a look at this Robert Nyman article.

Web storage, meet SQL

For a recent small project, I decided to try out web storage with JSON as a way of keeping track of images uploaded to a data URI generator; since web storage works using simple key/(string)value pairs it finds a natural partner in JSON for storing more complex values and nested data structures.

This worked well though it seemed a little cumbersome; parsing/serialising JSON and manipulating arrays of objects manually every time. So to make things a little easier I developed a simple SQL-like interface for creating, reading, updating and deleting data ‘rows’ from the stored data.

To see it in action here is the previously mentioned image data URI generator online.

I’ve named this interface DOM Storage Query Language, or DomSQL. For the ‘how to’, API details and source I’ll hand over to its google code project site. I’d be glad for any feedback or suggestions on the features, and of course, any bugs :)

This is…

the online home of Pete Boere, web developer in Bristol, UK.

follow moi

code.google.com/p/jelly-javascript

Flickr photostream