如何将数据保存在会话存储中并在稍后获取？

Question

我想在点击<a> (例如：<a class=".fach" onClick="reply_click(this.id)" id="deutsch" href="#"> Deutsch </a>)后保存数据，我给了每个<a>一个不同的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 + '/');
        }
    }

另外，我想在刷新后清除sessionStorage：

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

由于您已经为您的click标记设置了一个a事件，所以您可以从a中删除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中使用dots .。使用class="fach"而不是class=".fach"。

如果您希望元素切换open类，则只需为open添加CSS规则即可。

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

Answer 2

研究从来都不是空的吗？您不应该有两个.ready函数。只要有一个，同时打电话里面的所有东西。

$(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");
          });
        });

另外，.toggleclass需要两个类：

.toggleclass('open','classWithRedBackground')

我没有看到css -its中有红色背景的类，也没有指定-it。