Secties weergeven op basis van SessionStorage API

[aDutchCow]

Mijn vraag
Voor een projectje wil ik dat gebruikers op een pagina divs aan kunnen klikken. Uiteindelijk staan deze divs gelijk aan een sectie. Zo is er een sectie met een header, banner, over ons en een footer. Wat ik nu wil bereiken is dat alleen de secties die aangeklikt worden, op de volgende pagina worden weergegeven. Secties die niet aangeklikt worden, zijn dan niet zichtbaar.

Op dit moment heb ik het plan om met jQuery een active class mee te geven aan de div die geactiveerd is. Deze wil ik dan met SessionStorage opslaan, zodat deze op een andere pagina uitgelezen kunnen worden.
Divs die niet zichtbaar horen te zijn wil ik verbergen met display:none.

Mijn vraag is: Hoe zorg ik er voor dat op een logische manier deze divs worden gekoppeld aan een bepaalde sectie en hoe ik deze divs kan opslaan met sessionstorage zodat ze weer makkelijk uitgelezen kunnen worden.

Relevante software en hardware die ik gebruik
HTML, CSS en jQuery/Javascript.

[André]

Geef elke div een ID en sla die ID's op?

[q-enf0rcer.1]

ID's zijn opzich een goede oplossing, een andere potentiele oplossing is om een JSON object te maken met de DIV structuur, bijvoorbeeld:

code:

<div id="main">
    <div id="sub1"></div>
    <div id="sub2"></div>
    <div id="sub3"></div>
</div>

code:

var state = {
    main: {
        active: true,
        sub1: {
            active: true
        },
        sub2: {
            active: true
        },
        sub3: {
            active: true
        }
    }
}

Dit JSON object moet je dan als string in je localstorage opslaan, en zodra je die op de volgende pagina weer ophaalt weer omzetten in een object.