Javascript 将活动类数据存储在浏览器的localStorage中_Javascript_Html_Jquery_Css_Bootstrap 4

Javascript 将活动类数据存储在浏览器的localStorage中

javascript html jquery css bootstrap-4

Javascript 将活动类数据存储在浏览器的localStorage中,javascript,html,jquery,css,bootstrap-4,Javascript,Html,Jquery,Css,Bootstrap 4,当我导航到其他页面时，我正在尝试将单击链接的活动类存储在localStorage中。怎么做 A P S 假设每个a都有一个id，您可以将其设置为：然后，您可以获取它并使用以下工具将其应用回：为每个列表创建一个id <body onload = "check_storage()"> <div id="collapse2" class="panel-collapse collapse"> <ul class="list-group"> <li

当我导航到其他页面时，我正在尝试将单击链接的活动类存储在localStorage中。怎么做



A
P
S

假设每个

都有一个

id

，您可以将其设置为：

然后，您可以获取它并使用以下工具将其应用回：

为每个列表创建一个id

<body onload = "check_storage()">
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
  <li class="list-group-item active" id="id1" onclick= "active("id1")"><a id="a" style="color: white">A</a</li>
  <li class="list-group-item" id = "id2" onclick = "active("id2")"><a id="p" style="color: white">P</a></li>
  <li class="list-group-item" id = "id3" onclick = "active("id3")"><a id="s" style="color: white">S</a></li>
</ul>
</div>

加载页面主体时，它会检查localstorage中的id，并将该id设置为活动组。调用active function时，它会清除以前存储的数据，并将当前id添加到本地存储。

分享您迄今为止的尝试，以便我们了解您如何更改活动类以及如何满足您的需求。您好，我对jquery知之甚少。因此，我无法进一步了解如何更改活动类。我只是用了bootstrap。当我转到不同的链接时，活动类不会改变。要存储所需的信息，请测试该值并向单击的一个按钮添加一个类。。。第二节定义了什么method@Shockwave

它是jQuery语法中的

id

-选择器（源自CSS）

$('#' + localStorage.getItem('activeListGroupItem'))
  .parent().addClass('active');

<body onload = "check_storage()">
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
  <li class="list-group-item active" id="id1" onclick= "active("id1")"><a id="a" style="color: white">A</a</li>
  <li class="list-group-item" id = "id2" onclick = "active("id2")"><a id="p" style="color: white">P</a></li>
  <li class="list-group-item" id = "id3" onclick = "active("id3")"><a id="s" style="color: white">S</a></li>
</ul>
</div>

//onload of your page this will get called
 function check_storage() {
    //check if there is any value in localStorage
if (localStorage.getItem("listId") != null) {
    //get that value
    var val= localStorage.getItem("listId");
    console.log(val);
    setActive(val); //call function
     }
     }

 function active(id) {
localStorage.removeItem('listId');//clear previous data
localStorage.setItem("listId", id);//add data to storage
console.log(id);
      }

 function setActive(value) {
document.getElementById(value).classList.value = "list-group-item active";
    }