How to use LocalStorage on last HTML select value

Question

How can I set/retrieve the last selected value of a select drop-down with JavaScript? I'm trying to create an onchange function on a select drop-down that that sets the selected option, and then on each page-load, that valued is loaded.

Here is the HTML

<select class="testSelect">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
    <option value="test2">test3</option>
    <option value="test2">test4</option>
</select>

不过，我在使用 Javascript 时遇到了一些麻烦。

var select = document.querySelector(".testSelect");
var selectOption = select.options[select.selectedIndex];
var getLast = localStorage.getItem(select, lastSelected);
selectOption = getLast;


select.onchange = function () {
   var lastSelected = select.options[select.selectedIndex].value;
   localStorage.setItem(select, lastSelected);
 }

这是一个小提琴http://jsfiddle.net/5yJNL/1/

Answer 1

您的 HTML 中的值是错误的

<select class="testSelect">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
    <option value="test3">test3</option>
    <option value="test4">test4</option>
</select>    

Javascript

var select = document.querySelector(".testSelect");
var selectOption = select.options[select.selectedIndex];
var lastSelected = localStorage.getItem('select');

if(lastSelected) {
    select.value = lastSelected; 
}

select.onchange = function () {
   lastSelected = select.options[select.selectedIndex].value;
   console.log(lastSelected);
   localStorage.setItem('select', lastSelected);
}

http://jsfiddle.net/2MPPz/1/