locastorage speichern Auswahl javascript

Question

<select id="Gender" onchange="fctCheck(this.value);"> 
 
     <option value="">Choose Gender</option> 
 
     <option value="men">Men</option> 
 
     <option value="wemen">Wemen</option> 
 
     <option value="girls">Girls</option> 
 
     <option value="boys">boys</option> 
 
    </select> 
 
    <br> 
 
     <br> 
 
    <select id="men" name="subselector" style="display:none"> 
 
     <option value="">Choose an item</option> 
 
     <option value="tsm">T-Shirt</option> 
 
     <option value="lsm">long sleeve</option> 
 
    <option value="tankm">Tank Top</option> 
 
    <option value="fzhm">Full zip Hood</option> 
 
    <option value="pohm">Pull over Hood</option> 
 
    <option value="fzfm">Full zip Fleece</option> 
 
    <option value="fm">Fleece</option> 
 
    </select> 
 
    
 
    
 
    <select id="wemen" name="subselector" style="display:none"> 
 
     <option value="slw">short sleeve</option> 
 
    
 
    </select> 
 
    
 
    <select id="girls" name="subselector" style="display:none"> 
 
     <option value="shortsg">shorts</option> 
 
     
 
    </select> 
 
<select id="boys" name="subselector" style="display:none"> 
 
     <option value="tshirtb">tshirt</option> 
 
     
 
    </select> 
 
    <div style='display:none;' id="wsl"> 
 
         <div class="colore white" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png"> 
 
       </div> 
 
       <div class="colore black" data-image="http://mebe.co/ford"> 
 
       </div> 
 
       <div class="colore yellow" data-image="http://mebe.co/f150"> 
 
       </div> 
 
       <div class="colore orange" data-image="http://mebe.co/yukon"> 
 
       </div> 
 
       <div class="colore red" data-image="http://mebe.co/370z"> 
 
       </div> 
 
      </div> 
 
      
 
       <div style='display:none;' id="mtsm"> 
 
    <div class="colore white active" data-image="http://torcdesign.com/shirts/white.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg"> 
 
    </div> 
 
    <div class="colore black" data-image="http://torcdesign.com/shirts/black.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg"> 
 
    </div> 
 
    <div class="colore yellow" data-image="http://torcdesign.com/shirts/yellow.jpg" data-image-back="http://amp.site88.net/shirts/orange.jpg"> 
 
    </div> 
 
    <div class="colore orange" data-image="http://torcdesign.com/shirts/orange.jpg" data-image-back="http://amp.site88.net/shirts/yellow.jpg"> 
 
    </div> 
 
    <div class="colore red" data-image="http://torcdesign.com/shirts/red.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg"> 
 
    </div> 
 
    </div>

ich möchte wissen, wie ich auf einer zweiten Seite ein Bild anzeigen kann die Informationen mit Hilfe der Benutzer nach unten auf Drop ausgewählt wurde mir gesagt localstorage zu verwenden, aber ich habe nicht War es in der Lage, es zum Laufen zu bringen, kann mir jemand bitte genau beibringen, wie man die Auswahl aller Dropdowns speichert, die der Benutzer wählt? Alles, was ich brauche, ist, die Auswahl von der vorherigen Seite zu speichern, und ich werde mich um den Rest kümmern.

Answer 1

Sie können alle Werte im Objekt speichern und dann mit Hilfe von auf lokalen Speicher setzen.

var vals = { 
    gender:"male" // object structure example 
}; 
localstorage.setItem('nameforvalues', JSON.stringify(vals)); 

als nach

auf die zweite Seite bewegen können Sie das Objekt erhalten mit

var storedvals = local storage.getItem('nameforvalues'); 
storedvals = JSON.parse(storedvals); 

Answer 2

, dass Sie eine Richtung geben sollte:

 function save() { 
 
      localStorage.setItem("selection", document.getElementById("Gender").value); 
 
     } 
 

 
     window.onload = function() { 
 
      console.log(localStorage.getItem("selection")); 
 
     }

<select id="Gender" onchange="save()"> 
 
    <option value="">Choose Gender</option> 
 
    <option value="men">Men</option> 
 
    <option value="wemen">Wemen</option> 
 
    <option value="girls">Girls</option> 
 
    <option value="boys">boys</option> 
 
</select>