Question

我正在尝试将复选框的值写入本地存储，然后检索它们。设置值工作正常。但是，当我尝试访问本地存储时，它会访问它太多次，并且每次调用该函数时它访问它的次数都会增加。例如，第一次调用该函数时，单个数组将打印到控制台。第二次打印2个数组，第三次打印三个数组，依此类推。

我的后续代码继续在HTML列表中显示数组中的项目，因此，有多个数组会混淆它并复制数据

有什么线索可以防止多次生成数组？我试图删除for循环，看看是否是原因，但这没有区别。据我所知，这是第一部分的问题，但我不太确定在哪里

$("#confirm-button").click(function(event){
    event.preventDefault();
    if (localStorage.length===0) {
        createAlbum();
    }
    else if (localStorage.length>0) {
        document.getElementById("confirmation").style.display="block";
        $("#Yes").click(function(event){
            event.preventDefault();
            localStorage.clear();
            createAlbum();
            document.getElementById("confirmation").style.display="none";
        })
        $("#No").click(function(event){
            event.preventDefault();
            document.getElementById("confirmation").style.display="none";
        })
    }
});

function createAlbum(){
    if ($("li input:checkbox:checked").length===0){
        alert("You have not selected any songs. Please select at least one song")
    }
    else if ($("li input:checkbox:checked").length>0) {
        var searchIDs = $("li input:checkbox:checked").map(function () {
            return $(this).val();
        }).get();
        localStorage.setItem('searchIDs', JSON.stringify(searchIDs));
        retrievedObject = localStorage.getItem('searchIDs');
        var information = JSON.parse(retrievedObject);
        console.log(information);
        $('#overlay_text').append("<ol id='newList'></ol>");
        for (var i = 0; i < information.length; i++) {
            var item = document.createElement('li');
            item.append(information[i]);
            $('#newList').append(item);
        }
      }
}

HTML：

<div id="overlay">
    <div id="overlay_text">
    </div>
</div>
<div id="confirmation">
    <div id="confirmation-text">
    An album already exists are you sure you want to overwrite it?
    <button id="Yes">Yes</button>
    <button id="No">No</button>
    </div>
</div>

修改

包含调用该函数的代码。第一位是检查本地存储中是否存在任何值。如果不存在值，则调用该函数。如果值确实存在，则询问用户是否希望覆盖此数据。＆＃39;确认＆＃39;是显示有关向用户覆盖数据的消息的窗口

Answer 1

这种情况正在发生，因为每次用户点击确认按钮时都会添加事件，尝试将功能$("#Yes").click(function(event)和$("#No").click(function(event)移出$("#confirm-button").click(function(event)。

Answer 2

我怀疑您的问题是在另一个事件的处理程序中创建事件侦听器的结果。这是一般的坏习惯

每次单击确认按钮时，您都会向Yes / No按钮添加一个新的侦听器，因此多次调用Yes / No的事件处理程序（每次用户单击确认时都会调用一次）

在添加新$("#confirm-button").click

之前，将您的是/否点击聆听者移至off()之外或使用click

$("#Yes").off('click').on('click', function(event){...

本地存储被读取太多次

2 个答案: