Question

我创建了一个包含输入字段“fname”，“emailId”，“phoneNo”的表单页面。不，我正在创建一个JSON数组并将详细信息存储在本地存储中，如下所示：

<script>

    var jsonArr=[];

    $(document).ready(function(){

        $('#addVendor').submit(function(){

            var fname=$('#addVendor').find('input[name="first_name"]').val();
            var emailId=$('#addVendor').find('input[name="email_id"]').val();
            var phoneNo=$('#addVendor').find('input[name="phone_no"]').val();

            var jsonObj={};
            jsonObj["fname"]=fname;
            jsonObj["emailId"]=emailId;
            jsonObj["phoneNo"]=phoneNo;

            jsonArr.push(jsonObj);

            localStorage.setItem("userInfo", JSON.stringify(jsonArr));


        });

    });

</script>

现在在显示页面中，我将获取此localStorage对象并显示它。

<script>

var jsonArr;
$(document).ready(function(){


    jsonArr=localStorage.getItem("userInfo");
    jsonString=JSON.parse(jsonArr);


    if(jsonArr!=null)
        {


    for(i=0; i<jsonString.length;i++)
        {

        var display=display+"<p>"+jsonString[i][i]+"</p>";



        }
     display+="<br>"

     $('div').html(display);

        }


    $('#addVendorbutton').click(function(){

        window.open("addVendor.jsp","_self",false,"");
    });
});
</script>

现在我想要的是我在表单页面中输入的新细节应该在localstorage对象中添加，它应该显示在显示页面中。但是我在表单页面中输入的最新细节只会存储在localstorage中，而不会存储早期的详细信息。无论显示什么都是“未定义”。我该如何解决这个问题？

从localstorage中获取JSON数组数据并动态地在html中显示它

0 个答案: