0

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

这是我的代码：

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>

查询：

$(".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;}
4

1 回答 1

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


    }


 });
于 2013-06-10T20:35:04.970 回答