时间戳

首页 > 解决方案 > 如何将数据保存在会话存储中并稍后获取？

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

问题描述

我想在点击后保存数据<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 + '/');
        }
    }

另外，我想在刷新后清除 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;
}

但奇怪的是没有任何作用。是我的错吗？如果缺少任何信息，请告诉我。

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

标签： javascripthtmlcssredirect

解决方案

由于您的标签已经有一个click事件a，您可以onClick从 HTML 中删除：

<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类，您所要做的就是添加一个 CSS 规则open：

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

推荐阅读