HTML5 локальное хранилище save .toggleClass

Question

Как сохранить загруженный класс в локальное хранилище HTML 5?

Это моя простая функция переключения:

/* Toggle */ 
    $('.bar-toggle').on('click',function(){ 
     $('.container').toggleClass('with_toggle'); 
    }); 

Я не очень понимаю, как использовать локальное хранилище, и все примеры, я наткнулся используют .hide и .Show и не может найти все, что связано с toggleClass

Я не хотел бы использовать .Show и .hide, поскольку они являются дорогостоящими для браузера, а просто воспользоваться моим классом тумблер ...

скрипку: fiddle example

codepen:

Answer 1

• использовать идентификатор для элемента, в противном случае не будет в состоянии предназначаться этот элемент после переключая (удаление) это класс

---

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

---

• use! Important to overrid е фоновый цвет

---

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

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

---

• хранения класса имя/состояние переключаемых

---

//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

---

Answer 2

U можно использовать метод "$(element).hasClass(string class)"

Пример:

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

Когда у доступа к 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; 

И, если вы установите значение как булева localStorage.setItem("container_with_toggle", true), и можно использовать тройной оператор или 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 

Помните, что в каком-то браузере и нужно использовать window.localStorage.

До свидания!