javascript - 表单选择未保存在 localStorage 中

Question

我正在为 iAd Producer 开发 HTML View 。我正在尝试添加一个句子列表，其中包含学生可以选择的替代单词，并在学生更改时将这些值保存到 localStorage，并在重新访问页面时用这些值重新填充选择。

我正在修改我编写的一些代码，这些代码可以很好地在页面上保存多个输入框。但当我尝试将它与多个选择一起使用时，我的行为很奇怪。基本上，无论答案以哪种顺序完成，都只会存储最后选择的值。当重新访问该页面时，代码尝试将该值放入每个选择中。当然，对于没有相应值的两个选择，这会失败。

我不明白为什么会发生这种情况，希望有人能够发现明显的问题。谢谢。

<div>
<script type="text/javascript">

var uniqueId = "FC2-U2-A-P29";

$(document).ready(function () {
   function onStartup() {
    $.each( $("select"), function() {
        if (localStorage[$(this).attr("value")+uniqueId]) {
        $(this).val(localStorage[$(this).attr("value")+uniqueId]);
        }  
    });
}
onStartup();  
});

$('.drop').change(function () {
localStorage[$(this).attr("value")+uniqueId] = $(this).val();
});
</script>   

<form>
<label class="number">1.</label>
    <label class="text">Breakfast is the </label>
    <select name="select1" class="drop">
            <option value="blank">Choose a word</option>
            <option value="one1">one</option>
            <option value="first1">first</option>
    </select>
    <label class="text"> meal of the day.</label>
<br>
<label class="number">2.</label>
    <label class="text">I always eat </label>
    <select name="select2" class="drop">
            <option value="blank">Choose a word</option>
            <option value="three2">three</option>
            <option value="third2">third</option>
    </select>
    <label class="text"> meals a day.</label>
<br>
<label class="number">3.</label>
    <label name="select3" class="text">My football team is in</label>
    <select class="drop">
            <option value="blank">Choose a word</option>
            <option value="two3">two</option>
            <option value="second3">second</option>
    </select>
    <label class="text"> place in the league.</label>
<br>      
<button class="clearButton" onclick="clearAnswers()">Clear&nbsp;</button>

<script type="text/javascript">
function clearAnswers() {
$.each( $("select"), function() {
    if (localStorage[$(this).attr("value")+uniqueId]) {
        localStorage.removeItem($(this).attr("value")+uniqueId);
        $(this).val("blank");
    }
    location.reload();
});
}
</script>
</form>
</div>

Answer 1

此代码在 select 中失败的可能原因如下:

$.each( $("select"), function() {
    if (localStorage[$(this).attr("value")+uniqueId]) { //select doesn't have any attribute value.
    $(this).val(localStorage[$(this).attr("value")+uniqueId]);
    }  
});

Select 标记没有任何 value 属性。我认为 .val() 就是您所需要的。如果您查看代码，您基本上会迭代 select 标记并检查 select 的 value 属性(该属性不存在)。尝试将其更改为 .val() 然后再尝试。