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

您必须像这样获取所有对象并将其设置到本地存储中：

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;
    });
});

Answer 2

您需要先从本地存储加载原始阵列，然后添加新对象，然后将其保存回本地存储。像下面的代码这样的东西应该会有所帮助。

$(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;
  });
});

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

2 个答案: