[英]HTML5 LocalStorage - how to use it with hyperlinks?
I'm hoping to use HTML5 Local Storage on my web page data so it persists beyond a page refresh. 我希望在我的网页数据上使用HTML5本地存储,这样它就可以在刷新页面后继续存在。
Here is my code: 这是我的代码:
<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>
So if I click 'Blue' and/or 'Black', it will store this in LocalStorage
? 因此,如果我单击“蓝色”和/或“黑色”,它将存储在
LocalStorage
吗?
Can someone help point me in the right direction? 有人可以帮我指出正确的方向吗?
Thank you :-) 谢谢 :-)
Try first to give unique id to your elements 首先尝试为您的元素赋予唯一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>
and then 接着
$(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');
}
});
});
$(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');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.