Как сохранить значение тега в локальном хранилище и как извлечь его из локального хранилища?

Question

Я хочу сохранить значение тега привязки в локальном хранилище в зависимости от того, что нажимается, и я хочу получить при загрузке в jquery, тогда мне нужно добавить класс для этого щелкнутого значения как «активный», как это сделать?

Ниже 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>

Answer 1

доступ LocalStorage довольно легко просто использовать

localStorage.setItem('key', value) 

и

localStorage.getItem('key') 

Answer 2

Sample Fiddle

Установить и получить значение для локального хранилища. А для активного класса используйте add/remove class.

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

Answer 3

попробовать этот код:

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