如何将数据保存在会话存储中，然后再获取

Question

我想在单击<a>(例如：<a class=".fach" onClick="reply_click(this.id)" id="deutsch" href="#"> Deutsch </a>(后保存数据我给了每个<a>一个不同的id。确切的id无关紧要。我还添加了onClick="reply_click(this.id)"，以便稍后通过变量获取id

$(document).ready(function() {
$(".fach").on("click", function() {
function reply_click(clicked_id){
sessionStorage.setItem('fach', clicked_id);
$(clicked_id).toggleClass("open");
}
});
});
$(document).ready(function() {
$(".stufe").on("click", function() {
var clicked_id = $(this).attr('id');
sessionStorage.setItem('stufe', clicked_id);
$(clicked_id).toggleClass("open");
});
});

在将它保存在会话存储中后，我想再次获取它并将其插入我的重定向链接：

var stufe = sessionStorage.getItem('stufe');
var fach = sessionStorage.getItem('fach');
if(stufe != null){
if(fach != null){
window.location.replace('../learn/' + stufe + '/' + fach + '/');
}
}

另外，我想在刷新后清除会话存储：

function CallbackFunction(event) {
if (window.event) {
if (window.event.clientX < 40 && window.event.clientY < 0) {
sessionStorage.clear();
} else{
sessionStorage.clear();
}
} else{
}
}

当类"；打开"；为某个<a>切换。我希望背景变为红色：

#class-5 .open, #class-6 .open, #class-7 .open, #class-8 .open, #class-9 .open, #class-10 .open, #class-k1 .open, #class-k2 .open{
background: #cb002d;
color: white;
}

但奇怪的是，非措辞的工作。是我的错吗？如果有任何信息丢失，请告诉我。

希望你能帮助我-丹尼尔。

Answer 1

由于a标记已经有了click事件，因此可以从HTML:中删除onClick

<a class="fach" id="deutsch" href="#"> Deutsch </a>

然后，在您的click事件中，您可以直接获得单击的元素的id，并将其保存到本地存储：

$(document).ready(function() {
$(".fach").on("click", function() {
var clicked_id = $(this).attr('id');
sessionStorage.setItem('fach', clicked_id);
$('#' + clicked_id).toggleClass("open");
});
});

注意：当您想将类分配给元素时，不要在HTML中使用点.。使用class="fach"而不是class=".fach"。

如果您希望元素切换open类，那么您所要做的就是为open:添加一个CSS规则

.open{
background: #cb002d;
color: white;
}

Answer 2

stufe永远都不是null吗？你不应该有两个现成的函数。只要有一个，就可以同时调用其中的所有内容。

$(document).ready(function() {
$(".fach").on("click", function() {
function reply_click(clicked_id){
sessionStorage.setItem('fach', clicked_id);
$(clicked_id).toggleClass("open");
}
});
$(".stufe").on("click", function() {
var clicked_id = $(this).attr('id');
sessionStorage.setItem('stufe', clicked_id);
$(clicked_id).toggleClass("open");
});
});

另外，.thogglass需要两个类：

.toggleclass('open','classWithRedBackground')

我在你的css中没有看到红色背景的类-它没有被分配-它无论如何都没有定义