local Wert Reseting nicht auf Seite aktualisieren

Question

Benutzer ausgewählten Wert von Auswahlbox auf Schaltfläche Wert in, aber es (Localstorage) Wert auf Aktualisierung der Seite ändert (F5)

function change(){ 
 
     var opt = $("#gsb_tb option:selected").text(); 
 
     var stored = localStorage.setItem('project',JSON.stringify(opt)); 
 
     var valueofstore= JSON.parse(localStorage.getItem('project')); 
 
     document.getElementById("set-project").value= valueofstore; 
 
    }

<select id="gsb_tb" style="height: 45px; width: 78%; margin-left: 70px; padding-right: 90px; vertical-align: middle;" tabindex="0" autocomplete="off"> 
 
<option value="" disabled selected>Select your Project</option> 
 
<option value="370"> E-Card</option> 
 
<option value="278">Labs</option> 
 
<option value="196">Absolute DB</option> 
 

 
<input value="Set as Working Project" onclick="change()" aria-label="I'm Feeling Lucky" name="btnI" class='center-btn' jsaction="sf.lck" type="submit" id='set-project'>

Answer 1

Von dem, was ich verstehen kann, könnte suchen Sie window.onload

function change(){ 
    var opt = $("#gsb_tb option:selected").text(); 
    var stored = localStorage.setItem('project',JSON.stringify(opt)); 
    var valueofstore= JSON.parse(localStorage.getItem('project')); 
    console.log(valueofstore) 
    document.getElementById("set-project").value= valueofstore; 
} 
function load(){ 
    var valueofstore= JSON.parse(localStorage.getItem('project')); 
    console.log(valueofstore) 
    if (valueofstore){ 
     document.getElementById("set-project").value= valueofstore; 
    } 
} 
window.onload = load; 

Answer 2

Sie mein ausgewählter und gespeicherter Wert in localStorage wird nicht angezeigt, wenn du deine Seite richtig aktualisierst?

Wenn das stimmt, ist nichts mit dem Speichern von localStorage falsch, aber Sie müssen den Wert wiederherstellen, um> Optionswert auszuwählen.

Answer 3

So etwas wie das?

Sie müssen die Daten aus dem lokalen Speicher auf Seite laden

<select id="gsb_tb" style="height: 45px; width: 78%; margin-left: 70px; padding-right: 90px; vertical-align: middle;" tabindex="0" autocomplete="off"> 
<option value="" disabled selected>Select your Project</option> 
<option value="370"> E-Card</option> 
<option value="278">Labs</option> 
<option value="196">Absolute DB</option> 
</select> 

<button value="s" type="button" id='set-project'>Change</button> 

JS

$(document).ready(function(){ 
    var project = localStorage.getItem('project'); 
    if(undefined !== project && project != "") 
    { 
    document.getElementById("set-project").innerHTML = project; 
    } 

    $("#set-project").on("click", update); 

}) 

function update(){ 
    var opt = $("#gsb_tb option:selected").text(); 
    var stored = localStorage.setItem('project',opt); 
    var valueofstore= localStorage.getItem('project'); 
    document.getElementById("set-project").value= valueofstore; 
    document.getElementById("set-project").innerHTML= valueofstore; 
} 

JSFiddle