Q:

Using localstorage with a selection list and a variable

I have this portion of a plugin I wrote that lets a player select a consumable item from a drop down list and how many they would like to use. Recently it was requested that the selections they make would still be there when they return to the page later. This sounds like a job for localstorage! The problem is that when the user returns and the value is correctly set by localstorage it doesn't set the value of ConsumableNUM normally set by the onchange event.
Here is the current selection list and button
<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>

and here is the setting of localstorage that recalls the previously selected value.
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;
}

Thanks!
EDIT
Not sure why but, when I try to apply the same method to a a second selection list it isn't working. It is either not saving the value or sometimes returning the wrong one! The second list and the function for it is below:
<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>

and the function:
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;
}

A:

Setting an option as selected doesn't trigger your onchange handler. This is why your global variable is not defined. Set a value explicitly:
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
}

To your second question: You have an option without a value there, this could make the difference. Try to drop it to make sure.

