localStorage loop missing records после удаления 2 записей (на другой странице)

Question

Все работает нормально, когда я добавляю записи, используя мою форму. Все они хорошо отображаются на странице. Когда я нажимаю кнопку удаления, которая создается с каждой записью, она удаляет запись и перезагружает страницу. Это также работает. Во второй раз, когда я это делаю, мои записи, похоже, исчезают.

Например, я добавляю 5 записей под названиями: a, b, c, d, e. Они появляются, я удаляю запись b, список перезагружается с помощью a, c, d, e без проблем. В тот момент, когда я удаляю c из вновь созданного списка, моя запись e исчезает, поэтому он показывает только a и d.

Очевидно, что я делаю что-то ужасно неправильно, я надеюсь, что кто-то может показать мне, что это. Если это плохая практика программирования, так, пожалуйста, дайте мне знать, в каком направлении искать правильный путь.

У меня есть 3 раздельные страницы:

Сохранение записей:

function storeEntry(){ 
    var myId = localStorage.length; 
    addBtn.addEventListener("touchstart", submitEntry, false); 
    addBtn.addEventListener("mousedown", submitEntry, false); 

    function submitEntry(event) { 
     //Get the form data to store in the Array 
     var myTitle = document.getElementById("myTitle").value; 
     var myDate = document.getElementById("myDate").value; 
     var myContent = document.getElementById("myContent").value; 
     //Fill array that will be placed in localstorage 
     var myArray = [myId,myTitle,myDate,myContent]; 
     //Store it as a json string 
     localStorage.setItem(myId, JSON.stringify(myArray)); 
     //Provide feedback 
     alert("Item: " + myTitle + " has been added with id: "+myId); 
     //Id +1 zodat het volgende item een uniek id krijgt. 
     myId=myId+1; 
     //Clear the form 
     setFields(); 
    } 
} 

Для удаления записей:

function deleteEntry(){ 
    var key=localStorage.key(this.i); 
    this.removeEventListener("click",deleteEntry); 
    localStorage.removeItem(key); 
    alert("Item : "+key+" is verwijderd!"); 
    window.location.href = "showEntry.html"; 
} 

И, наконец, для показа записей:

function loadEntries(){ 
    var myEntryBox = document.getElementById("entryBox"); 
    var myvar=""; 
    for(var i=0;i<=localStorage.length;i++){ 
     if(localStorage.getItem(i)!==null) { 

      var myData = JSON.parse(localStorage[i]); 
      myvar = myvar +"-------------------"+ myData; 
      var newNode = document.createElement('div'); 
      newNode.innerHTML = myData; 
      myEntryBox.appendChild(newNode); 

      var delButton = document.createElement('button'); 
      delButton.innerHTML = "Del"; 
      delButton.i=myData[0]; 
      newNode.appendChild(delButton); 
      alert("This node id is: "+myData[0]); 
      delButton.addEventListener("click",deleteEntry); 

     } 
     else{ 
      alert("Geen data"); 
     } 

     document.getElementById("log").innerHTML = myvar; 
    } 
} 

Answer 1

Я думаю, интерес m лежит с вашим идентификатором ключа ... Вы устанавливаете его на длину localstorage, но когда вы удаляете элемент, длина изменяется ... Вместо этого используйте счетчик и увеличивайте на +.

Я думаю, что ваш смотреть на нее как массив, но на самом деле объект (например, словарь) со свойством длины ... вы удаляете ключи, так что длина «неправильно» ..

var counter = 0; 

function storeEntry(){ 
    counter++; 
    var myId = counter; 
    addBtn.addEventListener("touchstart", submitEntry, false); 
    addBtn.addEventListener("mousedown", submitEntry, false); 

    function submitEntry(event) { 
     ... 
     //Id +1 zodat het volgende item een uniek id krijgt. 
     //myId=myId+1; <-- no need anymore 
    } 
} 

Вам нужно будет исправить ваше удаление ....

Answer 2

я понял мою проблему,

на странице showEntry я зацикливание с:

for(var i=0;i<=localStorage.length;i++){ 
    if(localStorage.getItem(i)!==null) { 

     var myData = JSON.parse(localStorage[i]); 

Я изменил это:

for(var i=0;i<=localStorage.length;i++){ 
    var myKey=localStorage.key(i); 
    if(localStorage.getItem(myKey)!==null) { 

localStorage.getItem пытается найти элементы, соответствующие ключ от переменной I, но это может привести к ошибкам, так как ключевые имена, хранящиеся могут быть намного выше, чем длина localstorage после удаления элементов.