讓本地存儲記住addClass

Question

我試圖讓本地存儲記住什麼時候點擊一個項目......基本上就像一個切換，我想讓它記住當你點擊或顯示其中一個框。它看起來像在控制檯中錄製它，但當您重新加載頁面時，它會回到原來的狀態？我究竟做錯了什麼？我想讓它記住一個盒子從紅色變成綠色的時候。

這裏是我的代碼：

http://jsfiddle.net/AafAN/2/

HTML：

<div id="modalbox"> 
    <div class="token complete-sm-off">click me</div> 
    <div class="token complete-med-off"></div> 
    <div class="token complete-lrg-off"></div> 

<button id="clear">Clear </button> 

</div> 

JQuery的：

$(".complete-sm-off").click(function(){ 

     $completedToken.addClass("complete-sm-on"); 

}); 


var $completedToken = $(".complete-sm-off"); 

// On ALT+L event 
if ($completedToken.hasClass("complete-sm-on")) { 
    $completedToken.addClass("complete-sm-on"); 
    window.localStorage.hasLightClass = true; 
} else { 
    window.localStorage.hasLightClass = false; 
    $completedToken.removeClass("complete-sm-on"); 
} 
for (var key in localStorage) { 
    console.log(key + ": " + localStorage[key]); 
} 
// On page load 
var hasClass = window.localStorage.hasLightClass || false; 
if (JSON.parse(hasClass)) { 
    $completedToken.addClass("complete-sm-on"); 
} 




//clear local storage button 
$("#clear").click(function(e) { 
    e.preventDefault(); 

    window.localStorage.clear(); 

    }); 

CSS：

.token { 
    background-image:url(imgs/token_checkmarks_042813.png); 
    width:80px; 
    height: 80px; 
    background-repeat:no-repeat; 
    float:left; 
    display:block; 
    overflow: hidden; 
    border: 1px dashed #ccc; 
    } 
.complete-sm-off{background-color:red; opacity:0.5;  } 
.complete-med-off{background-color:red; opacity:0.5;  } 
.complete-lrg-off{background-color:red; opacity:0.5;  } 

.complete-sm-on{background-color:green; opacity: 1;} 
.complete-med-on{background-color:green; opacity: 1;} 
.complete-lrg-on{background-color:green; opacity: 1;} 

Answer 1

我想通了一些研究之後...

當測驗完成......這樣設置令牌項目：

$(".myItem").click(function(){ 
localStorage.setItem('mySmallTokenState', 'open'); 
}); 

在文檔準備標籤將這個。這將檢查該項目是否在加載頁面的本地存儲中。如果是這樣，請添加完成的課程。

$(document).ready(function(){ 


    if(localStorage.getItem('mySmallTokenState') == 'open') { 
           //add class with completed token 
       $(".complete-sm-off").addClass("complete-sm-on"); 


    } 


});