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

【问题标题】：Storing form values as array of objects in local storage将表单值作为对象数组存储在本地存储中
【发布时间】：2019-10-21 13:00:04
【问题描述】：

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

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

【问题讨论】：

让你的“myArray”全局化，否则每次它都会创建一个新的
您可以将数组设置为本地存储，每次更新时，您都可以检索它，推送新对象并将其分配回使用的本地存储密钥
@Vishalmodi 我已经在全球范围内声明了 myArray.. 谢谢！
@shrys 我的问题是我如何每次都创建一个新对象？
您已经在 source page script 中执行此操作，而不是将新对象推入其中后将 obj 分配给 object 键分配 myArray

标签： javascript jquery arrays json

【解决方案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;
  });
});

【讨论】：

【解决方案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;
    });
});

【讨论】：