HTML5 Web Storage, Web Database, FileReader, FileWriter, and AppCaching APIs will transform Web pages into local applications, but not yet
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.
The HTML5
standards crew chose to fix all of these problems and lay the foundation
for the final victory of browser-based software by giving the
JavaScript programmer the ability to store practical amounts of data on
the local computer. At the simplest, this might be a cache for all of
the calls to the central computer, but it can be much more. The more
sophisticated programmers might allow the users to store their Web pages
locally, imitating the last major feature of desktop software by
gaining access to the disk. There's no need to install software any
longer.
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: setItem, getItem, and 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.
Read Full Story