Buonasera, ci riprovo per la terza volta, sto creando un libro-app sfruttando il magnifico universo di html-css-javascript ed ora mi sono ritrovati ad affrontare il problema "localStorage"...
Sono autodidatta ed imparo le cose un po alla volta man mano che mi si pongono i problemi sfruttando soprattutto intenet e forum vari...
ora veniamo al mio problema, incomincio illustrandovi un esempio(molto ridotto) del mio progetto:

<html>
<head>
<script>
function cambio1(){
document.getElementById("primodiv").style.display= "none";
document.getElementById("secondodiv").style.displa y="block";}
</script>

<script>
function cambio2(){
document.getElementById("secondodiv").style.displa y="none";
document.getElementById("terzodiv").style.display= "block";}
</script>

<script>
function cambio2(){
document.getElementById("terzodiv").style.display= "none";
document.getElementById("quartodiv").style.display ="block";}
</script>

<style>
#primodiv{
display:block;
position:relative;
top:50%;
left:50%;
height:100vmax;
width:50vmax;
margin-top:-50vmax;
margin-left:-25vmax;}
</style>

<style>
#secondodiv{
display:none;
position:relative;
top:50%;
left:50%;
height:100vmax;
width:50vmax;
margin-top:-50vmax;
margin-left:-25vmax;}
</style>

<style>
#terzodiv{
display:none;
position:relative;
top:50%;
left:50%;
height:100vmax;
width:50vmax;
margin-top:-50vmax;
margin-left:-25vmax;}
</style>

<style>
#quartodiv{
display:none;
position:relative;
top:50%;
left:50%;
height:100vmax;
width:50vmax;
margin-top:-50vmax;
margin-left:-25vmax;}
</style>

<style>
#leggi{
position:absolute;
top:40vmax;
left:20vmax;
color:red;}
</style>

<style>
#carica{
position:absolute;
top:60vmax;
left:20vmax;
color:red;}
</style>

<style>
#avanti1{
position:absolute;
top:40vmax;
left:20vmax;
color:red;}
</style>

<style>
#avanti2{
position:absolute;
top:40vmax;
left:20vmax;
color:red;}
</style>
<style>
#salva1{
position:absolute;
top:60vmax;
left:20vmax;
color:red;}
</style>

<style>
#salva2{
position:absolute;
top:60vmax;
left:20vmax;
color:red;}
</style>

<style>
#salva3{
position:absolute;
top:30vmax;
left:20vmax;
color:red;}
</style>

</head>

<body>

<div id="primodiv">
<div id="leggi" onclick="cambio1()">Inizia Lettura</div>
<div id="carica">Segnalibro</div>
</div>

<div id="secondodiv">
<div id="avanti1" onclick="cambio2()">avanti</div>
<div id="salva1">imposta segnalibro</div>
</div>

<div id="terzodiv">
<div id="avanti2" onclick="cambio3()">avanti</div>
<div id="salva2">imposta segnalibro</div>
</div>

<div id="quartodiv">
<div id="salva3">imposta segnalibro</div>
</div>


</body>
</html>

Ora, innanzittutto scusate per il codice grezzo ma serve solo a darvi un idea...
abbiamo quattro div, il primo visibile e con il tasto leggi attiva la funzione "cambio" portandoci sul secondo div che con "avanti" porta al terzo etc etc.
Il mio quesito e il seguente...se mi trovo sul secondo div e premo sul div "salva2" dovrei attivare un localStorage che faccia in modo che al mio riavvio premendo su segnalibro nel primodiv dovrebbe mandare in "display:none il "primodiv" ed in "display:block" direttamente il "secondodiv2; lasciando gli altri due nel loro stato.
In piu per finire in bellezza dovrebbe accadere che al secondo riavvio voi decidiate di salvare al "terzodiv2 e questo salvataggio dovrebbe sovrapposrsi al primo cambiando cosi il localstorage in maniera che al nuovo riavvio da "segnalibro" si passi direttamente al "terzodiv" questa volta..
Spero innanzittutto di esssere stato chiaro e di riuscuire ad avere il vostro aiuto!
Granzie Mille in Anticipo!