2017-08-25 112 views
0

用戶選擇的值設置到按鈕的價值,但它(的localStorage)值正在改變頁面刷新(F5)localStorage的值刷新從選擇框中

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'>

+1

你似乎缺少')''後localStorage.setItem( 'project',JSON.stringify(opt);'。它將會是'JSON.stringify(opt));' –

+0

在'JSON.stringify(opt)'''''丟失後有一個語法錯誤 – Livingstone

+0

是的,這是工作g,但是,現在它在頁面刷新時重置 –

回答

1

從我能理解,你可能會尋找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; 
1

你意味着當您刷新頁面時,您選擇並保存的localStorage值不會反映出來嗎?

如果這是正確的,保存到localStorage沒有問題,但您需要恢復值以選擇>選項值。

+0

我沒有得到你 –

0

像這樣的事情?

您需要從本地存儲加載數據在頁面加載

<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

+0

沒有,它現在只在頁面刷新時更新值 –

+0

您是否希望在用戶單擊時更改按鈕的文本?看到更新的答案 – Livingstone