如何通过jQuery/Cookie为特定点击元素持久化CSS类？

核心逻辑 #

1. 点击元素时，通过唯一的data-product-sku标识目标元素，添加CSS类后将该sku写入Cookie
2. 页面加载完成时，读取Cookie中存储的sku值，匹配对应元素并恢复CSS类

具体代码实现 #

1. 基础依赖（若未引入jQuery） #

如果项目还未引入jQuery，先添加：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. 点击事件与Cookie写入 #

假设目标元素类为.product-item，要添加的激活类为active，分两种场景处理：

单选场景（仅允许一个元素激活）

$('.product-item').on('click', function() {
  // 先移除所有同类型元素的激活类
  $('.product-item').removeClass('active');
  // 给当前点击元素添加激活类
  $(this).addClass('active');
  
  // 获取当前元素的唯一sku
  const sku = $(this).data('product-sku');
  // 写入Cookie，有效期设为7天（可按需调整）
  document.cookie = `selectedProductSku=${encodeURIComponent(sku)}; expires=${new Date(Date.now() + 7*24*60*60*1000).toUTCString()}; path=/`;
});

多选场景（允许多个元素同时激活）

$('.product-item').on('click', function() {
  const $currentItem = $(this);
  // 切换当前元素的激活类
  $currentItem.toggleClass('active');
  
  // 收集所有激活元素的sku，用逗号分隔
  const activeSkus = $('.product-item.active').map(function() {
    return $(this).data('product-sku');
  }).get().join(',');
  
  // 将sku列表写入Cookie
  document.cookie = `selectedProductSkus=${encodeURIComponent(activeSkus)}; expires=${new Date(Date.now() + 7*24*60*60*1000).toUTCString()}; path=/`;
});

3. 页面加载时恢复激活状态 #

页面刷新后，读取Cookie并匹配元素恢复类：

单选场景恢复代码

$(document).ready(function() {
  // 从Cookie中提取选中的sku
  const selectedSku = document.cookie.split('; ').find(row => row.startsWith('selectedProductSku='))?.split('=')[1];
  if (selectedSku) {
    // 解码后匹配元素并添加激活类
    $(`.product-item[data-product-sku="${decodeURIComponent(selectedSku)}"]`).addClass('active');
  }
});

多选场景恢复代码

$(document).ready(function() {
  // 从Cookie中提取选中的sku列表
  const selectedSkusStr = document.cookie.split('; ').find(row => row.startsWith('selectedProductSkus='))?.split('=')[1];
  if (selectedSkusStr) {
    const skuList = decodeURIComponent(selectedSkusStr).split(',');
    // 遍历sku列表，给对应元素添加激活类
    skuList.forEach(sku => {
      $(`.product-item[data-product-sku="${sku}"]`).addClass('active');
    });
  }
});

关键注意事项 #

• path=/确保Cookie在整个网站范围内可读取，避免页面路径不同导致失效
• 使用encodeURIComponent和decodeURIComponent处理sku中的特殊字符，防止Cookie值异常
• 有效期可按需调整：若需关闭浏览器后失效，删除expires参数即可

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