Jquery 如何使用sessionStorage还原以前选择的列表项？

我正在处理一个项目，我想在其中存储选定的列表项（这些项得到一个

活动的类

），并在下一页加载将该类添加到选定的项中。可以从中选择4个单独的列表（具有相同的类）

为了完成这个任务，我使用sessionStorage。问题是如何存储选定的项目，以便在下一页加载正确的项目并使其处于活动状态

我尝试将项目的文本节点保存到会话存储中，然后使用

$。each（）

，将其值与页面上列表项目的值进行比较。但是没有成功。我也尝试过保存所选项目的jQuery对象，但作为回报，我得到了错误的数据（只是最后添加的项目在事实jQuery对象中）

下面是我在CodePen上的代码示例：

$（函数（）{
//添加/删除所选类别上的“检查图标”
$（'category_uulist'）。在（'click'，'li'，函数（e）上{
var otherListItem=$（“#作者李：不是（：第一个孩子）”；
var firstListItem=$（“#作者李：第一个孩子”）；
var$this=$（this.not（'.dropdown header'）；
if（firstListItem.hasClass（'active'））{
//将单击的类别标记/取消标记为所选类别
$this.hasClass（'active'）？$this.removeClass（'active'）：$this.addClass（'active'）；
//选中第一个列表项时，任何其他选择都会取消选中第一个项目上的选项
如果（$this.is（其他列表项））{
firstListItem.removeClass（'active'）；
}
}否则{
$this.hasClass（'active'）？$this.removeClass（'active'）：$this.addClass（'active'）；
//选中第一项（“任意”作者）时，列表上的其他选择将被取消选中
如果（$this.is（firstListItem））{
otherListItem.removeClass（“活动”）；
}
}
//根据选择更改下拉文本
$（'.dropdown button span:first child'）.text（$（otherListItem）.hasClass（'active'））？“一个或多个选定项”：“任意”）；
e、 预防默认值（）；
e、 停止传播（）；
var categories=JSON.parse（sessionStorage.getItem（'category'））| |[]；
var checkedItem=$this.hasClass（'active'）？$this.text（）：''；
类别。推送（checkedItem）；
if（会话存储）{
setItem（'category'，JSON.stringify（categories））；
}
});
var lastCheckedItems=JSON.parse（sessionStorage.getItem（'category'）；
var-checkedItem；
});
正文{
背景色：#ececec；
}
.类别{
宽度：400px；
保证金：0自动；
}
.类别\u标题{
填充：0 20px；
利润率：20px0；
}
.类别列表{
背景色：#fafafa；
列表样式：无；
填充：0 20px；
}
.类别列表李{
位置：相对位置；
填充：10px0；
光标：指针；
}
.category__列表li:非（.dropdown header）：悬停{
文字装饰：下划线；
}
.类别列表李a{
颜色：继承；
}
.类别列表li+li{
边框顶部：1px实心#4c；
}
.类别列表li.活动：之后{
内容：“X”；
位置：绝对位置；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
右：0；
}
.category\u title、.category\u列表{
字体大小：.9rem；
字号：600；
文本转换：大写；
}
.类别.下拉按钮{
显示：块；
宽度：100%；
背景色：#fafafa；
边界：无；
填充：10px 20px；
字号：600；
字体大小：.9rem；
文本对齐：左对齐；
文本转换：大写；
}
.类别.下拉菜单{
位置：相对位置；
浮动：无；
盒影：无；
边界半径：0；
边界：无；
宽度：100%；
}
.类别.下拉菜单LIA{
显示：块；
填充：0；
字号：600；
}
.类别.下拉菜单.活动a，
.类别.下拉菜单.活动a:悬停，
.类别.下拉菜单.活动a:焦点{
颜色：继承；
文字装饰：下划线；
}
.category.show.dropdown切换：之后{
边界顶部：无；
边框底部：.3em实心；
}

团队



(二)

主题





年





作者
任何


团队成员



赫尔辛基队



Louvain La Neuve团队




我从您的问题和代码中了解到，您希望使用sessionStorage，并使用其中的值在下一页中创建包含活动类的列表

首先，我不知道您在
sessionStorage
中存储了什么，但是如果您存储了这些元素的
id
，那么在其他页面上使其处于活动状态会更容易

然后，
sessionStorage
中的数据是数组形式的，因此要首先访问它，最好存储
JSON.parse（sessionStorage.getItem（'category'）在一个变量中，并像使用带有索引号的数组一样访问它

然后，在将包含在需要此功能的页面中的
js
文件中，尝试此循环或更简单的循环

for(int i=0;i<{variable name of json}.length;i++){
  $('#{variable name of json}[i]').addClass( "active" );
}

for（inti=0；iIt是一个中间版本。
JSON.parse（sessionStorage.getItem（'category'））；
已放置在变量
lastCheckedItems
中。由于从
sessionStorage
接收数据时出现问题，我的代码未完成。我更改了一种存储在
sessionStorage
中的数据结构。最初它是一个数组，但现在我决定使用对象并基于
id
在每个列表中，我在create中拆分项目