Question

I’m trying to store a boolean or int someplace where I can check it after the page has loadedd, so that I can change the boolean to false after the page has loaded (via an a link).

I know you can put this as hidden text or hidden radio buttons on the page, but thats really ugly…

I was also thinking about using HTML 5’s Client-side Storage.

So far I have this:

But obviously this doesn’t work when I check stopOnMouseOut later on in the script it will always return true…

stopOnMouseOut = true;

    var stopSoundsVar = document.getElementById("stop_sounds");
    stopSoundsVar.onclick = function() {
        // toggle boolean
        if (stopOnMouseOut == true) {
            stopOnMouseOut = false;
        }else {
            stopOnMouseOut = true; 
        }
        //alert(stopOnMouseOut);
        return false;
     }

Are there any best practices towards doing this?

Answer 1

As you stated in your question, you could use localStorage (persistent on browser loads) or sessionStorage (which only lasts the life of the page — new windows are new sessions).

Using localStrorage (or sessionStorage) is as easy as:

localStorage.key = "value";

You can only store strings in DOM storage, so you may have to compare the boolean you retrieve back out as "true" or "false" rather than just true or false. Alternatively, you can convert the data to JSON, and parse the JSON back out.

Saving data with localStorage: http://hacks.mozilla.org/2009/06/localstorage/

Compatibility: http://dev-test.nemikor.com/web-storage/support-test/