Trying out HTML5 local storage

I decided I’d try out HTML5’s local storage after reading Christian Heilmann’s Smashing Magazine article on local storage. (Check it out, it’s worth it.) It’s always looked very intriguing, and the article reminded me to give it a whirl.

I’ve always wanted to have the slide-out tray menu on the left retain the visitor’s “setting”, but had no way of doing so reliably. One might say that using local storage is far from reliable, but it actually made sense: it would provide enhanced experience for those with newer browsers, but degrade with older browsers (read: just ignored). And I set off on making it work.

The end result is as you see it on the left, with the following piece of relevant code:

    var expanded = true;
    if( localStorage && localStorage.getItem('whimsical-tray') == 0 ) {
        expanded = false;
    }

    // some initializing of the animations and events

    if( !expanded ) {
        toggleCollapse();
    }

    Y.on( 'click', function(e){
        var storeVal = ( box.fx.get('reverse') ) ? 1 : 0;
        localStorage && localStorage.setItem( 'whimsical-tray', storeVal );
        toggleCollapse();
    }, '#nav-site-tab' );

Crazy simple, it’s almost too good to be true.