让本地存储记住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"); 


    } 


});