Как да се покаже div въз основа на масив в sessionStorage - javascript, jquery, масиви

Имам решетка от изображения и когато щракнете върху div (който също има идентификатор), той получава класа "активен". След това поставих идентификаторите на divs, които получиха класа "активен", в масива sessionStorage.

На следващата страница искам да прочета кои идентификатори са запазени в моя sessionStorage и искам да покажа конкретни divs.

Например масивът съдържа ID „банер“, банерът на класа става видим.

Моят код досега:

 var sections = $.map($(".active"), function(n, i){
return n.id;
});

sessionStorage.setItem("sections", JSON.stringify(sections));

var storedSections = JSON.parse(sessionStorage.getItem("sections"));

Това е, за да поставите идентификатора в масив.

Мога да ги прочета с това във моя .html файл:

<script type="text/javascript">
document.getElementById("test").innerHTML = sessionStorage.getItem("sections");
</script>

Резултатът е нещо като:

["header","banner","footer"]

Но как да покажа определени divs, в зависимост от резултата по-горе?

Отговори:

map метод е обърнете масив от низове (идентификационен списък) и го зададете в сесийното си хранилище. Ако искате да зададете активен клас на тези divs, можете да използвате тези масиви като тези:

$(document).ready(function(){
JSON.parse(sessionStorage.getItem("sections")).forEach(function(id){
$("#"+id).addClass("active");
})
});

Можете да го направите по такъв начин, като повтаряте масива, който сте получили от хранилището:

var divs = ["div_1", "div_3"];
divs.forEach( function (div){

/* JavaScript approach */
var elem = document.getElementById(div);
elem.style.display = "block";

/* jQuery approach */
$("#" + div).show();
});

div {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_1">Hello 1</div>
<div id="div_2">Hello 2</div>
<div id="div_3">Hello 3</div>

var sections = sessionStorage.getItem("sections");
$(sections).each(function(value) {
$("#" + sections[value]).show();
});

https://jsfiddle.net/Lbzbztwa/