页面刷新时本地存储值未重置答案

【问题标题】：Localstorage value not reseting on page refresh页面刷新时本地存储值未重置
【发布时间】：2017-08-25 15:47:35
【问题描述】：

用户从选择框中选择的值被设置为按钮值，但它（LocalStorage）的值在页面刷新（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'>

【问题讨论】：

在localStorage.setItem('project',JSON.stringify(opt); 之后，您似乎缺少)。它将是JSON.stringify(opt));
有一个语法错误，在JSON.stringify(opt) 之后缺少一个)
是的！它正在工作，但是现在它在页面刷新时重置
在开发者控制台中检查任何 js 错误
不，我检查过了，没有错误

标签： javascript local-storage

【解决方案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;

【讨论】：

【解决方案2】：

您的意思是刷新页面时不会反映您选择并保存到 localStorage 的值对吗？

如果没错的话，保存到localStorage没有什么问题，但是需要恢复到select > option值的值。

【讨论】：

我没听懂你

【解决方案3】：

这样的？

您需要在页面加载时从本地存储中加载数据

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

$(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

【讨论】：

您希望按钮的文本在用户点击时发生变化吗？查看更新的答案