HTML5 LocalStorage - 如何將它與超鏈接一起使用？

Question

我希望用HTML5本地存儲在我的網頁數據，因此持續時間超過刷新頁面。

這裏是我的代碼：

<h3 data-target="#colours_filters">Colour</h3> 
<ul id="colours_filters"> 
    <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-black-2">Black</a></li> 
    <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-blue">Blue</a></li> 
</ul> 

所以，如果我點擊「藍」和/或「黑」，將其存儲在LocalStorage？

有人可以幫點我在正確的方向？

謝謝:-)

Answer 1

Check this Fiddler

$(document).ready(function(){ 

    $('.filters a').on('click', function() { 

     var data_filter = $(this).closest("a").data('filter'); 
     $(this).addClass('active'); 
     if($(this).hasClass('active')) { 
      localStorage.setItem(data_filter,true); 
     } else { 
      localStorage.setItem(data_filter,false); 
     } 

    }); 

    $('.filters a').each(function(){ 
     var data_filter = $(this).closest("a").data('filter'); 
     var checked = localStorage.getItem(data_filter); 
     if(checked){ 
      $(this).addClass('active'); 
     } else { 
      $(this).removeClass('active'); 
     } 
    }); 
});  

Answer 2

首先嚐試給唯一的ID到元素

<h3 data-target="#colours_filters">Colour</h3> 
<ul id="colours_filters"> 
    <li class="filter-option"><a href="#" id='unique_1' data-tax="colours" data-filter=".tag-colours-black-2">Black</a></li> 
    <li class="filter-option"><a href="#" id='unique_2' data-tax="colours" data-filter=".tag-colours-blue">Blue</a></li> 
</ul> 

然後

$(document).ready(function(){ 

    $('.filter-option a').on('click', function() { 

     var isActived = $(this).hasClass('active') == false; 
     var id = $(this).attr('id'); 

     localStorage.setItem(id,isActived); 

     $(this).toggleClass('active'); 
    }); 

    $('.filter-option a').each(function(){ 
     var id = $(this).attr('id'); 

     var hasActiveClass = localStorage.getItem("active"); 

     if(hasActiveClass != undefined){ 
      $(this).addClas('active'); 
     } 
    }); 

}); 

fiddlejs