Javascript 表单选择不保存在本地存储中

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

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

我不明白为什么会发生这种情况，希望有人能发现显而易见的事实。谢谢

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

var uniqueId=“FC2-U2-A-P29”；
$（文档）.ready（函数（）{
函数onStartup（）{
$。每个（$（“选择”），函数（）{
if（localStorage[$（this）.attr（“value”）+uniqueId]）{
$（this.val）（localStorage[$（this.attr（“value”）+uniqueId]）；
}  
});
}
启动时（）；
});
$（'.drop'）.change（函数（）{
localStorage[$（this.attr（“value”）+uniqueId]=$（this.val（）；
});
1.
早餐是最好的
选词
一
第一
一日三餐。


2.
我总是吃东西
选词
三
第三
一日三餐。


3.
我的足球队参加了比赛
选词
二
第二
在联盟中的位置。


清楚的
函数clearAnswers（）{
$。每个（$（“选择”），函数（）{
if（localStorage[$（this）.attr（“value”）+uniqueId]）{
localStorage.removietem（$（this.attr（“value”）+uniqueId）；
$（此）.val（“空白”）；
}
location.reload（）；
});
}

此代码在选择中失败的可能原因是：

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

---

选择标记没有任何值属性。我认为

.val（）

是您在这里需要的。如果您查看代码，您基本上是在select标记上迭代并检查select的

value

attribute（该属性不存在）。尝试将其更改为.val（），然后尝试。

要从本地存储保存和加载内容，请使用：

localStorage.setItem(<key>, <value>);

localStorage.setItem（，）；

及

localStorage.getItem（）；

您的选择器无效

---

将

$（this）.attr（“value”）+uniqueId

更改为

$（“选项：选中”，this）.text（）+uniqueId在所有事件中
 您的代码存在多个问题

第一个是您应该使用
.val（）
而不是
.attr（'value'）

第二个问题是，在localStorage中添加值的代码是在完全创建DOM之前执行的，因此选择还不存在。要解决这个问题，您需要在document.ready（aka
$（function（）{}）；
上绑定更改事件

我已经用修改过的代码制作了一个粘贴箱：
请创建一个jsfiddle.net来演示您的问题和预期结果您是否尝试附加
$（this.val（）
到本地存储，而不是每次
select
更改时为其分配新值？尽管进行了下面建议的所有更改，但我根本无法将任何值保存到本地存储。有人能告诉我为什么上面的代码保存了一个值而不是另外两个值吗？@gerrytan:给你。。。对不起，以前从来没有做过，所以我没意识到这很容易做到。对不起，这不能回答我的问题。谢谢你的建议。我尝试了这个，当页面被重新加载时，没有任何东西保存在本地存储中。此外，这仍然留下了一个问题，即为什么在我的原始代码中只存储一个值。有什么想法吗？谢谢你尝试回答。使用此代码时，没有任何内容保存在本地存储中。非常感谢您修改代码并制作粘贴。您是否设法让它存储任何值。每次我重新加载它时，它都会重置为默认值，而不是显示任何存储的值。我还尝试了iAd Producer中的代码，但无法获得要保存和重新加载的值。
localStorage.getItem(<key>);