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

Question

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

试试这个代码:

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