Getting localStorage and adding class to divs

Question

I have a question that is quite confusing. Everytime I check a "checkbox", it gets the closest "div" and add the class "hilight" and "marked" and set an Item to LocalStorage called "marking". When I switch from div 1 to 2, I remove the class "hilight", but i keep the class "marked".

I'm trying to get the LocalStorage, and add class "hilight" again to divs that has "marked"

JS Fiddle: http://jsfiddle.net/b4KgV/

HTML 1 2

<button class="1st">show 1st</button>
<button class="2nd">show 2nd</button>

JS

localStorage.clear();

$(document).on('click', ':checkbox', function () {
    if ($(this).is(':checked')) {
        $(this).closest("div").addClass('hilight marked');
        localStorage.setItem("marking","yes");
    }
         else {
                $(this).closest("div").removeClass('hilight marked');
            }
 });

$(".1st").on('click', function() {
  $(".second").css('display','none');
    $(".second").removeClass('hilight');
  $(".first").css('display','block');
});

$(".2nd").on('click', function() {
  $(".first").css('display','none');
    $(".first").removeClass('hilight');
  $(".second").css('display','block');
});

if (localStorage.getItem("marking")) {
    $(".marked").closest("div").addClass('hilight');
};

Thx.

Answer 1

Localstorage goes by key:value as you know, I tried to keep them separate. Try this fiddle

http://jsfiddle.net/b4KgV/11/

$(document).on('click', ':checkbox', function () {
    var div = $(this).closest("div").attr("id")
    if ($(this).is(':checked')) {
        $(this).closest("div").addClass('hilight marked');
        localStorage.setItem(div, true);
    } else {
        $(this).closest("div").removeClass('hilight marked');
        localStorage.setItem(div, false);
    }
});

$(".1st").on('click', function () {
    console.log("test")
    if (localStorage.getItem("firstDiv") == "true") {
        $(".first").closest("div").addClass('hilight');
    };
    $(".second").css('display', 'none');
    $(".second").removeClass('hilight');
    $(".first").css('display', 'block');
});