如何在本地存储中存储标记值以及如何从本地存储中获取?

时间:2017-02-17 09:22:39

标签: javascript jquery html local-storage

我想将锚标记的值存储在本地存储中,无论点击哪个,我想在jquery中加载fetch然后我需要为该单击的值添加类作为" 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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

localStorage访问非常简单,只需使用

即可
localStorage.getItem('key')

Microsoft.Identity

答案 2 :(得分:0)

试试这段代码:

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