Html5 Local Storage Save .toggleclass

How Can I save the toggled class into HTML 5 local storage? This is my simple toggle function: /* Toggle */ $('.bar-toggle').on('click',function(){ $('.container').toggl

Solution 1:

• use an id for the element, otherwise won't be able to target that element after toggling (removing) it's class

---

<ahref="javascript:void(0)"class="bar-toggle">toggle and save state</a><divid="container"></div>

---

• use !important to override the background-color

---

#container {
   background-color: #ededed;
    height: 200px;
    width: 200px;
}

.with_toggle {
   background-color: #aeaeae!important;
}

---

• storing the class name/state of toggled

---

//retrieve current state
$('#container').toggleClass(window.localStorage.toggled);

/* Toggle */
$('.bar-toggle').on('click',function(){

   if (window.localStorage.toggled != "with_toggle" ) {
      $('#container').toggleClass("with_toggle", true );
      window.localStorage.toggled = "with_toggle";
   } else {
      $('#container').toggleClass("with_toggle", false );
      window.localStorage.toggled = "";
   }

});

---

http://jsbin.com/wimojapowo/1/edit?html,css,js,output

---

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

---

Solution 2:

U can use method "$(element).hasClass( string class )"

Example:

$('.bar-toggle').on('click',function(){
    if ($('.container').hasClass('.with_toggle')) {
       // mark as false 'cos in the next step u remove class .with_togglelocalStorage.setItem("container_with_toggle", 0);
    } else {
       // mark as true 'cos in the next step u add class .with_togglelocalStorage.setItem("container_with_toggle", 1);
    }
    $('.container').toggleClass('with_toggle');
});

When u access to localStorage:

var container_with_toggle = localStorage.getItem('container_with_toggle'); // return string zero or one ("0" or "1")//So, u can use ternary
container_with_toggle = (container_with_toggle === "1") ? true : false;

And, if you set value like boolean localStorage.setItem("container_with_toggle", true), u can use ternary operator or JSON.parse.

var container_with_toggle = localStorage.getItem('container_with_toggle'); // return string with boolean notation ("false" or "true")//Ternary
container_with_toggle = (container_with_toggle === "true") ? true : false;
// Or use JSON.parse
container_with_toggle = JSON.parse(container_with_toggle ); // return boolean true or false

Remember, in some browser u need use window.localStorage.

Bye!