HTML5 local storage

based on http://jsfiddle.net/Shreerang/9SHfZ/

by lovromar

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<button id="offBtn" data-bind="click: bulbOnOffFunction, text :txtValue"></button>
<div class="bulbOn" id="divId1"></div>
<div class="bulbOff" id="divId2"></div>

CSS

.bulbOn {
    width:100px;
    height:100px;
    background-color:red;
    display:none;
}
.bulbOff {
    width:100px;
    height:100px;
    background-color:grey;
}

JavaScript

function ViewAll() {
    var self = this;
    self.txtValue = ko.observable("Off");
    //	var testObject =[{ "false" : 0, "true" : 1 }];  
    self.testObject = {
        menus: {
            bulb: {
                name: 'Light',
                value: {
                    title: "Off",
                    val: 0
                }
            },
            range: {
                name: 'Range Light',
                value: {
                    title: "Range",
                    val: 0
                }
            }
        }
    };

  
    /*       
     */
    self.saveToLocalStorage = function () {
        window.localStorage.setItem("trueValue", JSON.stringify(self.testObject));
        
    };
    
    self.getValueFromLocalStorage = function(){
        var myObject = JSON.parse(window.localStorage.getItem("trueValue"));
         if (myObject.menus.bulb.value.title == "On") {         
        self.txtValue("On");
        document.getElementById("divId2").style.display = "none";
        document.getElementById("divId1").style.display = "block";
        } else {
        self.txtValue("Off");
        document.getElementById("divId1").style.display = "none";
        document.getElementById("divId2").style.display = "block";
        }

    };

    self.bulbOnOffFunction = function () {
        
        var myObject = JSON.parse(window.localStorage.getItem("trueValue"));

        if (myObject.menus.bulb.value.title == "Off") {
            myObject.menus.bulb.value.val = 1;
            myObject.menus.bulb.value.title = "On";
            self.txtValue("On");
            window.localStorage.setItem("trueValue", JSON.stringify(myObject));

            document.getElementById("divId2").style.display = "none";
            document.getElementById("divId1").style.display = "block";
        } else { //on
            myObject.menus.bulb.value.val = 0;
            myObject.menus.bulb.value.title = "Off";
            self.txtValue("Off");
           ...