将表单值作为对象数组存储在本地存储中

Question

每次向数组添加新对象时，它都会覆盖旧值。但我希望我的数组看起来像：

myArray = [
{"fname":"kevin", "lname":"albert"},
{"fname":"albert", "lname":"kevin"},
...etc.
]

源页面脚本：

$(document).ready(function(){
$("#btn").click(function(){
var obj=new Object();
obj.fname=document.getElementById("fname").value;
obj.mname=document.getElementById("mname").value;
obj.lname=document.getElementById("lname").value;
localStorage.setItem("object",JSON.stringify(obj));
return false;
});
});

目标页面脚本：

var myArray=[];
$(document).ready(function(){
alert("hello");
myArray.push(localStorage.getItem("object"));
$("#btn2").click(function(){
document.getElementById("here").innerHTML=myArray;
return false;
});
});

Answer 1

您需要先从本地存储加载原始数组，然后添加新对象，然后将其保存回本地存储。类似于下面的代码应该会有所帮助。

$(document).ready(function(){
$("#btn").click(function(){
let objList = JSON.parse(localStorage.getItem("object")) || []; // read from localstorage
let obj = new Object(); // create new object
obj.fname=document.getElementById("fname").value; // add values to new object
obj.mname=document.getElementById("mname").value;
obj.lname=document.getElementById("lname").value;
objList.push(obj); // push new object to objectList
localStorage.setItem("object",JSON.stringify(objList)); // save objectList in localstorage
return false;
});
});

Answer 2

您必须获取所有对象并将其设置为本地存储，如下所示：

var myArray = (localStorage.getItem("objects")) ? JSON.parse(localStorage.getItem("objects")) : [];
$(document).ready(function(){
//alert("hello");
$("#btn2").click(function(){
document.getElementById("here").innerHTML=JSON.stringify(myArray);
return false;
});
});
$(document).ready(function(){

$("#btn").click(function(){
var obj=new Object();
obj.fname=document.getElementById("fname").value;
obj.mname=document.getElementById("mname").value;
obj.lname=document.getElementById("lname").value;

myArray.push(obj);
localStorage.setItem("objects",JSON.stringify(myArray));
return false;
});
});