Question

我正在尝试让本地存储器在单击某个项目时记住...基本上像切换一样工作，我希望它能够在您单击或显示其中一个框时记住。它看起来像是在控制台中记录它，但是当你重新加载页面时，它会恢复原状？我究竟做错了什么？我希望它能记住当盒子从红色变为绿色时。

这是我的代码：

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");


    }


 });

获取本地存储以记住addClass

1 个答案: