HTML5 Local Storage - letting your Web Apps do more
Local Storage (or Web Storage), is a simple yet very powerful feature of HTML5, that is pretty much supported across the board
by now, as in, by almost all browsers.
In essence, Local Storage lets you store information for a long period of time (more on that in a bit).
This has many uses, especially for Web Apps.
Let’s say you have a Web App that provides the user an event list of upcoming events, lets the user check some of them, and send them to his own email account for example.
Now suppose that the user has a bad connection, or perhaps the server is suddenly unresponsive. In such a case, until recently, the user would’ve had to stare at a blank page.
With Local Storage the list could be cached in the browser, so it would load the last event list that was retrieved, and even save the events that were checked by the user.
This is also handy for many other use cases, from To-Do lists to Resumable (finally!) Uploads.
Just to make a short example of how this works, inside your javascript you just write:
1
2
localstorage.food = ‘Carrot’;
sessionstorage.drink = ‘Water’;
You would be able to access localstorage.food until the user (or browser) clears the cache,
and sessionstorage.drink until the user closes your website (or of course if the cache is cleared).
Crazy Stuff (or: localStorageDB)
There’s actually a (sort of) Database layer for Local Storage,
that lets you create Tables, make Inserts, Queries, Updates and Deletions, how insane is that?
This is yet another example of creating a simple yet powerful web technology standard,
having it adopted by the major browsers (as always only Internet Explorer 8+) and see how quickly people build insane things on top of it.
You gotta love the Web Dev world