Создать идентификатор для каждого списка ..
<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>
В JavaScript создать функцию для хранения идентификатора в локальном хранилище
//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";
}
При загрузке тела страницы он проверяет идентификатор в localstorage и делает этот идентификатор активной группой. После вызова активной функции он очищает ранее сохраненные данные и добавляет текущий идентификатор в локальное хранилище.