HTML5 in the browser: Local data storage
HTML5 Web Storage, Web Database, FileReader, FileWriter, and AppCaching APIs will transform Web pages into local applications, but not yetFollow @peterwayner
Of all the changes bundled in the HTML5 drafts, few are as radical or subversive as the options for storing data locally. From the very beginning, the Web browser was intended to be a client in the purest sense of the word. It would display information it downloaded from a distant server, and it would do everything the distant server would tell it to do.
Programmers discovered the limitations to this fairly soon, and before long browsers started offering website developers the chance to leave a little piece of data behind. The creators tried giving this 4,096-byte text string a cute name, "cookie," but that didn't stop the controversy. Cookies became the focus as the greater public started to wonder just how the inscrutable gnomes at the central office were tracking their every move. People demanded and got the ability to delete cookies, which limited their possibilities for the developers.
[ Also on InfoWorld: Flashy new presentation tools in HTML5 will make it easier for Web designers to create slicker graphical extravaganzas. See "HTML5 in the browser: Canvas, video, audio, and graphics." ]
There were deeper problems with the spec. The cookies weren't just stored in the computer -- they were sent back to the server with requests. Savvy Web developers know it's not worth using many of those 4,096 bytes because the cost of accepting too much data on each and every call will drive up bandwidth bills and slow responsiveness.
HTML5 Web Storage: Session storage
The simplest level of Web Storage will store data for the current session -- in other words, as long as the browser tab or window remains open. This may not be a hard limit, however, because the spec leaves open the opportunity for the browser to keep this data around "during restarts."
There's not much to the mechanism. Each document gets a
sessionStorage object with a few major functions:
clear. The items are just pairs of keys and data just like an associative array. The data is a clone of the current values.
That's about it. New documents get new objects. There's not much difference between storing information in this
sessionStorage and declaring a global variable.
HTML5 Web Storage: Local storage
The real advantages come with access to the
localStorage object, which looks quite similar to the
sessionStorage object but behaves very differently. Where the
sessionStorage forgets, the
localStorage remembers. Data is supposed to stick around even after the window closes and the computer shuts down.