將localstorage與選擇列表和變量一起使用

Question

我有一個我寫的插件的這一部分，它可以讓玩家從下拉列表中選擇一個消耗品以及他們想要使用多少。最近有人要求，他們所做的選擇在稍後返回頁面時仍然存在。這聽起來像是一個本地存儲工作！問題是，當用戶返回並且由localstorage正確設置值時，它不會設置通常由onchange事件設置的ConsumableNUM的值。

這是當前選擇列表和按鈕

<input type="button" class="btnFJ" value="Energy" onclick="ACTIONS.use_consumable(EnergyCons,ConsumableNUM)"> 
<form style="display: inline"> 
<SELECT class="FJselect" name="numberconsumables" style="width: 54px" id="FJsconsumables" onchange="ConsumableNUM = this.options[selectedIndex].value;"> 
<OPTION class="FJoptionBG1" selected value="1">1</OPTION> 
<OPTION class="FJoptionBG2" value="2">2</OPTION> 
<OPTION class="FJoptionBG1" value="3">3</OPTION> 
<OPTION class="FJoptionBG2" value="4">4</OPTION> 
<OPTION class="FJoptionBG1" value="5">5</OPTION> 
<OPTION class="FJoptionBG2" value="6">6</OPTION> 
<OPTION class="FJoptionBG1" value="7">7</OPTION> 
<OPTION class="FJoptionBG2" value="8">8</OPTION> 
<OPTION class="FJoptionBG1" value="9">9</OPTION> 
<OPTION class="FJoptionBG2" value="10">10</OPTION> 
<OPTION class="FJoptionBG1" value="11">11</OPTION> 
<OPTION class="FJoptionBG2" value="12">12</OPTION> 
<OPTION class="FJoptionBG1" value="13">13</OPTION> 
<OPTION class="FJoptionBG2" value="14">14</OPTION> 
<OPTION class="FJoptionBG1" value="15">15</OPTION> 
<OPTION class="FJoptionBG2" value="16">16</OPTION> 
<OPTION class="FJoptionBG1" value="17">17</OPTION> 
<OPTION class="FJoptionBG2" value="18">18</OPTION> 
<OPTION class="FJoptionBG1" value="19">19</OPTION> 
<OPTION class="FJoptionBG2" value="20">20</OPTION> 
<OPTION class="FJoptionBG1" value="21">21</OPTION> 
<OPTION class="FJoptionBG2" value="22">22</OPTION> 
<OPTION class="FJoptionBG1" value="23">23</OPTION> 
<OPTION class="FJoptionBG2" value="24">24</OPTION> 
<OPTION class="FJoptionBG1" value="25">25</OPTION> 
<OPTION class="FJoptionBG2" value="26">26</OPTION> 
<OPTION class="FJoptionBG1" value="27">27</OPTION> 
<OPTION class="FJoptionBG2" value="28">28</OPTION> 
<OPTION class="FJoptionBG1" value="29">29</OPTION> 
<OPTION class="FJoptionBG2" value="30">30</OPTION> 
<OPTION class="FJoptionBG1" value="50">50</OPTION> 
<OPTION class="FJoptionBG2" value="100">100</OPTION> 
<OPTION class="FJoptionBG1" value="500">500</OPTION> 
</SELECT> 
</form> 

，這裏是localStorage的那回憶先前選定值的設置。

document.getElementById("FJsconsumables").onchange = function() { 
localStorage.setItem('FJsconsumables', document.getElementById("FJsconsumables").value); 
} 
if (localStorage.getItem('FJsconsumables')) { 
document.getElementById("FJsconsumables").options[localStorage.getItem('FJsconsumables')].selected = true; 
} 

謝謝！

編輯

不知道爲什麼，但是，當我嘗試同樣的方法適用於它不工作一個第二選擇列表。它要麼不能保存價值，要麼有時會返回錯誤的價值！第二個列表和它的功能是下面：

<form style="display: inline"> 
<SELECT class="FJselect" name="typeofconsumables" style="width: 110px" id="FJConsumable"> 
<option>-Energy</option> 
<OPTION class="FJoptionBG1b" value="1">Energy Drink - 10</OPTION> 
<OPTION class="FJoptionBG1b" value="5">Energy Infusion - 20</OPTION> 
<OPTION class="FJoptionBG1b" value="9">Atomic Energizer</OPTION> 
<OPTION class="FJoptionBG1b" value="11">Nucleic Reaction - 50</OPTION> 
<OPTION class="FJoptionBG1b" value="609">NUCLEIC ENERGY - 50</OPTION> 
<OPTION class="FJoptionBG1b" value="234">Red Line - 55</OPTION> 

<OPTION class="FJoptionBG2" value="523">SHC Present - 155</OPTION> 
<OPTION class="FJoptionBG1" value="489">Hallow Skull - 160</OPTION> 
<OPTION class="FJoptionBG2" value="499">Red Eyeball - 203</OPTION> 
<OPTION class="FJoptionBG1" value="501">Blue Eyeball - 203</OPTION> 
<OPTION class="FJoptionBG2" value="503">Yellow Eyeball - 203</OPTION> 
</select> 

和功能：

document.getElementById("FJConsumable").onchange = function() { 
localStorage.setItem('FJConsumable', document.getElementById("FJConsumable").value); 
} 
if (localStorage.getItem('FJConsumable')) { 
document.getElementById("FJConsumable").options[localStorage.getItem('FJConsumable')].selected = true; 
} 

Answer 1

設置的選項作爲選擇不觸發onChange處理。這就是爲什麼你的全局變量沒有被定義。明確設置的值：

if (localStorage.getItem('FJsconsumables')) { 
    document.getElementById("FJsconsumables").options[localStorage.getItem('FJsconsumables')].selected = true; 
    ConsumableNUM = localStorage.getItem('FJsconsumables'); 
} else { 
    ConsumableNUM = "1"; // or whatever is a usefull default value here 
} 

你的第二個問題：你有沒有價值有一個選項，這樣可以使不同。試着放下它來確保。