Jquery保留点击的链接并在刷新后添加/删除css类

Question

我有一个包含多个“过滤器”的页面，它们基本上是链接。 单击链接后，我可以过滤结果。 但是，当单击链接时，我想在刷新页面时添加/删除类。 我尝试使用 localstorage 但我的 localStorage 返回 null。 任何帮助，将不胜感激。 我对 Jquery 很陌生。 这可能是重复，但我的情况似乎是独一无二的，因为刷新时的 localstorage 在控制台上返回 null。

if (localStorage.getItem('filters')==null){
var filters={};
alert("in here");
}
else{
filters= JSON.parse(localStorage.getItem('filters'));
}

$(".li-filter").click(function(){

/*event.preventDefault();*/
var idstr= this.id.toString();
/*console.log(idstr);*/
if (filters[idstr] != undefined){
  filters[idstr] = filters[idstr]  +1;
}
else {
  filters[idstr]  = 1;
}
localStorage.setItem('filters',JSON.stringify(filters));
console.log(filters);
});

我不确定是否需要使用 AJAX 来保留我选择的链接 ID。

Answer 1

根据您的描述，我有一个工作小提琴： https : //jsfiddle.net/7mtxw2a3/4/ 。 我建议使用浏览器的开发人员工具在设置值后验证本地存储的内容，然后在页面刷新时再次验证。

$(document).ready(function() {
  var cached = localStorage.getItem('filters');
  var filters = cached ? JSON.parse(cached) : {};
  for (id in filters) {
    $('#' + id).addClass('cached');
  }
  $('li').click(function() {
    $(this).addClass('cached');
    var id = this.id.toString();
    if (filters[id]) {
        filters[id] += 1;
    } else {
        filters[id] = 1;
    }
    localStorage.setItem('filters', JSON.stringify(filters));
  });
});

Answer 2

我修改了另一个答案，直到它看起来有效。

$(document).ready(function() {
  var cached = localStorage.getItem('filters');
  var filters = (cached) ? JSON.parse(cached) : {};
  for (id in filters) {
    $('#' + id).addClass('cached');
  }
  $('li').click(function(e) {
    $(e.target).addClass('cached');
    var id = $(e.target).attr('id').toString();
    if (filters[id]) {
        filters[id] += 1;
    } else {
        filters[id] = 1;
    }
    localStorage.setItem('filters', JSON.stringify(filters));
  });
});

获取点击对象的位置是e.target 。 这是Jquery 事件对象剖析的链接。

但是，当一起使用 JQuery 和事件时，在很多情况下，您需要将元素反馈到选择器中，就像我对$(e.target)所做的那样。

要请求id属性，您需要链接.attr()方法。

给@Freddy 的小费，让他们开始小提琴。 这是我的小提琴版本。