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

Form select not saving in localStorage

本文关键字：存储 存在 选择 保存 表单      更新时间：2023-09-26

我正在为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>

此代码在 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()是你在这里需要的。如果你看一下代码，你基本上是在迭代选择标签并检查选择的属性（不存在value）。尝试将其更改为 .val（），然后尝试。

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

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

和 

localStorage.getItem(<key>);

您的代码存在多个问题。

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

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

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

您的选择器无效。

在所有情况下都使用$("option:selected",this ).text()+uniqueId;更改$(this).attr("value")+uniqueId。

相关文章：