localStorageは更新をクリアし、解析して文字列化しません。

Question

localStorageを使用した練習アプリケーションで作業しますが、ページの更新時に保存されたデータが消去されています。同様の質問に対する回答に基づいて、JSON.stringify（）を使用しました。 setItemおよびJSON.parse（）; getItemでは、まだ運がありません。これらの方法を間違った方法で使用していますか？参考までに、#petTypeと#petNameは入力ID、#nameと#typeはul IDです。ありがとう！

var animalArray = []; 

var addPet = function(type,name) { 

    var type = $("#petType").val(); 
    var name = $("#petName").val(); 
    localStorage.setItem("petType", JSON.stringify(type)); 
    localStorage.setItem("petName", JSON.stringify(name)); 

    animalArray.push(type,name); 
}; 

var logPets = function() { 

    animalArray.forEach(function(element,index) { 
     //empty array 
     animalArray.length = 0; 
     //empty input 
     $("input").val(""); 

     var storedName = JSON.parse(localStorage.getItem("petName")); 
     var storedType = JSON.parse(localStorage.getItem("petType")); 

     //append localStorage values onto ul's 
     $("#name").append("<li>" + storedName + "</li>"); 
     $("#type").append("<li>" + storedType + "</li>"); 
    }); 
}; 

//click listPets button, call logPets function 
$("#listPets").on("click", function() { 
    logPets(); 
    $("#check").html(""); 
}); 

//click enter button, call addPet function 
$("#enter").on("click", function() { 
    addPet(petType,petName); 
    $("#check").append("<i class='fa fa-check' aria-hidden='true'></i>"); 
}); 

Answer 1

ページが読み込まれたときにデータを読み込まないため、クリアされているようです。コード内の複数のバグがあります

• あなただけ
• animalArray.push(type, name);はおそらくない一貫性のない行動
• 0からanimalArray.lengthが正しくない設定を作成した、localStorageに最後に追加されたペットを保存していることが表示されますそれは、アレイへの2つの項目が追加されますので、何をしたい、それが1と同一の

を保存されますので、 animalArray.push({type: type, name: name});

logPetsだけで、メモリアレイで使用できるような何かを

固定コード：

var storedArray = localStorage.getItem("animalArray"); 
var animalArray = []; 
if(storedArray) { 
    animalArray = JSON.parse(storedArray); 
} 

var addPet = function(type,name) { 
    var type = $("#petType").val(); 
    var name = $("#petName").val(); 
    animalArray.push({type: type, name: name}); 
    localStorage.setItem("animalArray", JSON.stringify(animalArray)); 
}; 

var logPets = function() { 
    animalArray.forEach(function(element,index) { 
     //empty input 
     $("input").val(""); 
     //append localStorage values onto ul's 
     $("#name").append("<li>" + element.name + "</li>"); 
     $("#type").append("<li>" + element.type + "</li>"); 
    }); 
}; 

//click listPets button, call logPets function 
$("#listPets").on("click", function() { 
    logPets(); 
    $("#check").html(""); 
}); 

//click enter button, call addPet function 
$("#enter").on("click", function() { 
    addPet(petType,petName); 
    $("#check").append("<i class='fa fa-check' aria-hidden='true'></i>"); 
}); 

それをデモする簡単なフィドル：あなたは `localStorage`はリフレッシュにクリアされていると判断しているどのようにhttps://jsfiddle.net/rhnnvvL0/1/