如何将列表中激活条目的状态保存到sessionStorage实现状态持久化

实现方案 #

你这个场景下不需要逐个存储条目的激活状态，因为激活规则是「前total个条目统一激活」，直接存储total数值到sessionStorage即可，实现成本最低，性能也最优。

修改后的完整JS代码如下：

// 初始化时优先从sessionStorage取存储的激活数量，没有就用默认值6
var total = Number(sessionStorage.getItem('case_active_total')) || 6;
var cases = $(".cases__item").length;

// 页面加载时根据total初始化显示状态
$('.cases__item:lt(' + total +')').addClass("active").show();
// 初始化时判断是否要隐藏more按钮
if (total >= cases) {
  $('#morecases').hide();
}

$('#morecases').click(function () {
    total += 3;
    // 更新后立刻存储到sessionStorage
    sessionStorage.setItem('case_active_total', total);
    if (total <= cases) {
      $('.cases__item:lt(' + total + ')').addClass('active').show()
    } else {
      $('.cases__item:lt(' + total + ')').addClass("active").show();
      $('#morecases').hide();
    }
});

扩展说明 #

如果后续激活规则调整（比如允许用户单独点击条目切换激活状态，不是批量前N个激活），可以用JSON序列化的方式存状态数组：

// 存储状态数组
const activeStatus = $('.cases__item').map((_, item) => $(item).hasClass('active')).get();
sessionStorage.setItem('case_active_status', JSON.stringify(activeStatus));

// 读取状态数组
const savedStatus = JSON.parse(sessionStorage.getItem('case_active_status') || '[]');

你当前的需求用存total数值的方案就完全够用，不需要使用数组存储方案。

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