ローカルストレージがあまりにも多く読み取られています

Question

ローカルストレージにチェックボックスの値を書き込んでそれを取得しようとしています。値の設定はうまくいきます。しかし、私がローカルストレージにアクセスしようとすると、それはそれを何度もアクセスし、アクセスする回数は関数が呼び出されるたびに増加します。たとえば、関数が最初に単一の配列と呼ばれるときに、コンソールに出力されます。 2回目の配列が印刷され、3回目の配列が3回印刷されます。

私のその後のコードでは、複数のアレイを有することが混乱し、データ

私が複数回発生してから配列を防ぐことができますどのように任意の手掛かりを複製し、そのため、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> 

EDIT

含ま呼び出すコード関数。最初のビットは、現在ローカルストレージに値が存在するかどうかを確認することです。値が存在しない場合、関数が呼び出されます。値が存在する場合、ユーザーはこのデータを上書きするかどうか尋ねられます。 「確認は」これが起こっている

Answer 1

問題は、別のイベントのハンドラ内にイベントリスナーを作成した結果と思われます。これは一般的に悪い練習です

確認ボタンをクリックするたびに、はい/いいえボタンに新しいリスナーが追加され、はい/いいえのイベントハンドラが複数回呼び出されます（ユーザーがクリックする度に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)。