如何为AJAX页面过滤器复用LocalStorage及相关问题求助

让我们一步步搞定你遇到的这两个问题：

第一个问题：两组复选框的LocalStorage值被覆盖为最近一次选择 #

问题根源 #

你在点击事件里用$(this).serialize()来给colour和brand赋值，但$(this)只指向当前被点击的单个复选框，不管你点的是颜色还是品牌选项，这两个变量都会被设置成同一个复选框的序列化值，自然会互相覆盖。另外，你的multiple_values函数还存在一个隐藏bug：选择器没加类名前缀.，导致无法正确获取选中的复选框值。

修复方案 #

1. 修复multiple_values函数：给选择器加上类名的.前缀，确保能正确匹配到对应的复选框：

function multiple_values(inputclass){
  var val = new Array();
  // 加上.，因为inputclass是类名
  $("." + inputclass + ":checked").each(function() {
    val.push($(this).val());
  });
  return val;
}

2. 修改LocalStorage的赋值逻辑：利用修复后的multiple_values函数，分别获取颜色和品牌的所有选中值，再存入LocalStorage（同时删掉页面初始化时的localStorage.clear()，否则每次刷新都会清空保存的状态）：

$(function(){
  // 删掉原来的localStorage.clear()！

  $('.item_filter').click(function(){
    $('.product-data').html('<div id="loader" style="" ></div>');
    // 用修复后的函数获取正确的选中值数组
    const colour = multiple_values('colour');
    const brand = multiple_values('brand');
    $.ajax({
      url:"test-search.php",
      type:'post',
      data:{colour:colour,brand:brand},
      success:function(result){
        $('.product-data').html(result);
      }
    });
    // 存入LocalStorage，用更语义化的键名
    localStorage.setItem("filter_colour", JSON.stringify(colour));
    localStorage.setItem("filter_brand", JSON.stringify(brand));
  });
});

第二个问题：从详情页返回主页面时恢复筛选状态 #

解决思路 #

在主页面初始化时，先读取LocalStorage中保存的筛选值，然后将对应的复选框设为选中状态，最后自动触发一次AJAX请求加载筛选后的内容。

实现代码 #

修改页面初始化的逻辑，添加状态恢复的代码：

$(function(){
  // 页面加载时先读取LocalStorage的筛选状态
  const savedColours = JSON.parse(localStorage.getItem("filter_colour")) || [];
  const savedBrands = JSON.parse(localStorage.getItem("filter_brand")) || [];

  // 恢复颜色复选框的选中状态
  savedColours.forEach(colour => {
    $('.colour[value="' + colour + '"]').prop('checked', true);
  });
  // 恢复品牌复选框的选中状态
  savedBrands.forEach(brand => {
    $('.brand[value="' + brand + '"]').prop('checked', true);
  });

  // 如果有保存的筛选条件，自动触发AJAX加载结果
  if (savedColours.length > 0 || savedBrands.length > 0) {
    $('.product-data').html('<div id="loader" style="" ></div>');
    $.ajax({
      url:"test-search.php",
      type:'post',
      data:{colour: savedColours, brand: savedBrands},
      success:function(result){
        $('.product-data').html(result);
      }
    });
  }

  // 原来的点击事件逻辑（已经修改过的版本）
  $('.item_filter').click(function(){
    $('.product-data').html('<div id="loader" style="" ></div>');
    const colour = multiple_values('colour');
    const brand = multiple_values('brand');
    $.ajax({
      url:"test-search.php",
      type:'post',
      data:{colour:colour,brand:brand},
      success:function(result){
        $('.product-data').html(result);
      }
    });
    localStorage.setItem("filter_colour", JSON.stringify(colour));
    localStorage.setItem("filter_brand", JSON.stringify(brand));
  });
});

说明 #

• 用JSON.parse解析LocalStorage的值，因为我们存的时候是用JSON.stringify序列化的数组；如果LocalStorage中没有对应的值，就用空数组作为默认值，避免报错。
• 遍历保存的筛选值，用prop('checked', true)将对应的复选框设为选中状态。
• 如果有保存的筛选条件，自动触发AJAX请求，恢复筛选后的页面内容。

内容的提问来源于stack exchange，提问作者user3541184