如何将标签值存储在本地存储中以及如何从本地存储中获取？

我想将锚标记的值存储在本地存储中，无论哪个被点击，并且我想在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>

来源

2017-02-17 Mohan

包括你已经尝试过什么到目前为止 – guradio

所以你想要的代码记住什么联系你已点击 –

你想使你的点击的锚标签为有效？ –

localStorage的访问是很容易只使用

localStorage.setItem('key', value)

和

localStorage.getItem('key')

来源

2017-02-17 09:25:33 d3orn

Sample Fiddle

设置并获取本地存储的值。对于活动类使用添加/删除类。

$(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'); 
    }); 
});

来源

2017-02-17 09:37:08

查看活动课的更新。 –

On load it does not showing – Mohan

???我不站在？ –

试试这个代码：

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(); 
});

jsfiddle

来源

2017-02-17 09:56:42

它工作正常，但当我再次点击它应该隐藏活动类，当我复出意味着它应该从本地存储清除。 – Mohan

@Mohan请注意将来的所有要求。当我说“当我复出”时，你是什么意思？ –

如何将标签值存储在本地存储中以及如何从本地存储中获取？

回答

相关问题