Assign a unique identifier to each list item.
<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>
Implement a JavaScript function to store the selected id in local storage.
//This function will be called when the page loads
function check_storage() {
//Check if there is any stored value in localStorage
if (localStorage.getItem("listId") != null) {
//Retrieve the stored value
var val= localStorage.getItem("listId");
console.log(val);
setActive(val); //Call the function to set as active
}
}
function active(id) {
localStorage.removeItem('listId');//Clear previously stored data
localStorage.setItem("listId", id);//Add current id to storage
console.log(id);
}
function setActive(value) {
document.getElementById(value).classList.value = "list-group-item active";
}
Upon loading the page, it checks for the id in local storage and highlights the corresponding list item as active. The active function clears any previous data before adding the new id to local storage.