如何将标签值存储在本地存储中以及如何从本地存储中获取?
问题描述:
我想将锚标记的值存储在本地存储中,无论哪个被点击,并且我想在jquery中读取负载,然后我需要为该被点击的值添加类作为“active”如何执行此操作?如何将标签值存储在本地存储中以及如何从本地存储中获取?
下面是HTML代码,
<div class="flDropDiv category_fl">
<div class="flItems"><a class="category_filter" value="Full bed sheets " href="http://192.168.1.156/eles/bed-linen/full-bed-sheets"> Full bed sheets </a> </div>
<div class="flItems"><a class="category_filter" value="Fitted bed Sheet " href="http://192.168.1.156/eles/bed-linen/fitted-bed-sheet"> Fitted bed Sheet </a> </div>
<div class="flItems"><a class="category_filter" value="Flat bed sheet " href="http://192.168.1.156/eles/bed-linen/flat-bed-sheet"> Flat bed sheet </a> </div>
<div class="flItems"><a class="category_filter" value="Twin bed sheet " href="http://192.168.1.156/eles/bed-linen/twin-bed-sheet"> Twin bed sheet </a> </div>
<div class="flItems"><a class="category_filter" value="Twinxl bed sheets " href="http://192.168.1.156/eles/bed-linen/twinxl-bed-sheets"> Twinxl bed sheets </a> </div>
<div class="flItems"><a class="category_filter" value="Queen bed sheet " href="http://192.168.1.156/eles/bed-linen/queen-bed-sheet"> Queen bed sheet </a> </div>
<div class="flItems"><a class="category_filter" value="King bed sheets " href="http://192.168.1.156/eles/bed-linen/king-bed-sheets"> King bed sheets </a> </div>
<div class="flItems"><a class="category_filter" value="Cal king bed sheets " href="http://192.168.1.156/eles/bed-linen/cal-king-bed-sheets"> Cal king bed sheets </a> </div>
<div class="flItems"><a class="category_filter" value="Duvet covers " href="http://192.168.1.156/eles/bed-linen/duvet-covers"> Duvet covers </a> </div>
<div class="flItems"><a class="category_filter" value="Bed skirts " href="http://192.168.1.156/eles/bed-linen/bed-skirts"> Bed skirts </a> </div>
<div class="flItems"><a class="category_filter" value="Standard Pillow cases " href="http://192.168.1.156/eles/bed-linen/standard-pillow-cases"> Standard Pillow cases </a> </div>
<div class="flItems"><a class="category_filter" value="King Pillow cases " href="http://192.168.1.156/eles/bed-linen/king-pillow-cases"> King Pillow cases </a> </div>
<div class="flItems"><a class="category_filter" value="Pillow shells " href="http://192.168.1.156/eles/bed-linen/pillow-shells"> Pillow shells </a> </div>
</div>
答
localStorage的访问是很容易只使用
localStorage.setItem('key', value)
和
localStorage.getItem('key')
答
设置并获取本地存储的值。对于活动类使用添加/删除类。
$(document).on('click', 'a', function() {
$(this).prop('href')
localStorage.setItem('Url', $(this).prop('href'));
alert(localStorage.getItem('Url'));
$("a").each(function(index) {
if ($(this).prop('href') === localStorage.getItem('Url'))
$(this).addClass('newanchor');
else
$(this).removeClass('newanchor');
});
});
答
试试这个代码:
var localStorageIndex = "clickedLink";
$(function() {
$(".category_filter").click(function(e) {
if($(e.target).hasClass("active")){
return;
}
var clickedLink = getActiveLinkFromLocalStorage();
if(clickedLink !== e.target.href){
clickedLink = e.target.href;
$(e.target).addClass("active");
localStorage.setItem(localStorageIndex, clickedLink);
}
})
function getActiveLinkFromLocalStorage() {
return localStorage.getItem(localStorageIndex);
}
function initActiveLink(){
var clickedLink = getActiveLinkFromLocalStorage();
if(!clickedLink){
return;
}
$("a[href='" + clickedLink + "'].category_filter").addClass("active");
}
initActiveLink();
});
+0
它工作正常,但当我再次点击它应该隐藏活动类,当我复出意味着它应该从本地存储清除。 – Mohan
+0
@Mohan请注意将来的所有要求。 当我说“当我复出”时,你是什么意思? –
包括你已经尝试过什么到目前为止 – guradio
所以你想要的代码记住什么联系你已点击 –
你想使你的点击的锚标签为有效? –