로컬 저장소가 너무 많이 읽혀지고 있습니다.

Question

로컬 저장소에 확인란의 값을 쓰고 검색하려고합니다. 값을 잘 설정하면됩니다. 그러나 로컬 저장소에 액세스하려고하면 너무 많은 시간에 액세스하고 액세스하는 횟수는 함수가 호출 될 때마다 증가합니다. 예를 들어, 함수가 처음으로 단일 배열이라고 할 때 콘솔에 인쇄됩니다. 두 x 째 h 열이 인쇄되고 세 x 째 h 열은 인쇄됩니다.

내 다음 코드는 여러 개의 배열을 가진 것은 혼란과 데이터

내가 여러 번 발생되는 배열을 방지 할 수있는 방법 어떤 단서를 복제, 따라서, 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> 

편집

포함을 호출하는 코드 기능. 첫 번째 비트는 현재 로컬 저장소에 값이 있는지 확인하는 것입니다. 값이 없으면 함수가 호출됩니다. 값이 존재하면 사용자는이 데이터를 겹쳐 쓸 것인지 묻습니다. '확인'은 사용자에게 데이터를 덮어 쓰는 것에 관한 메시지를 표시하는 창입니다.

Answer 1

다른 이벤트의 처리기 내에 이벤트 리스너를 작성한 결과라고 생각됩니다.

확인 버튼을 클릭 할 때마다 예/아니요 버튼에 새 수신기를 추가하므로 예/아니요에 대한 이벤트 처리기가 여러 번 호출됩니다 (사용자가 클릭 할 때마다 한 번씩).

) 확인에 $("#confirm-button").click 외부에서 예/아니오를 클릭 리스너를 이동하지

하거나 새 click

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

Answer 2

사용자가 확인 버튼을 클릭 할 때마다 이벤트를 추가하기 때문에이 문제가 발생합니다. $("#Yes").click(function(event) 및 $("#No").click(function(event)을 $("#confirm-button").click(function(event).