Question

我正在为iAd Producer制作HTML视图。我正在尝试添加一个句子列表，其中包含学生可以选择的替代词，并将这些值保存到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]);
    }  
});

选择标记没有任何值属性。我认为.val()就是你所需要的。如果你看一下代码，你基本上是在select选择标签上进行迭代并检查select的value属性（不存在）。尝试将其更改为.val（），然后尝试。

Answer 2

要从localstorage使用保存和加载内容：

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

和

localStorage.getItem(<key>);

Answer 3

您的选择器无效。

在所有事件中使用$(this).attr("value")+uniqueId更改$("option:selected",this ).text()+uniqueId;。

Answer 4

您的代码存在多个问题。

第一个是您应该使用.val()而不是.attr('value')。

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

我使用修改后的代码制作了一个pastebin：http://jsbin.com/jubijuyatu/2/

表单选择不保存在localStorage中

4 个答案: