Javascript 如何使用localstorage存储对象的动态数组，并对特定项执行更新和删除操作？

我想知道如何在LocalStorage中存储对象的动态数组，并在页面上以表格格式显示它

我还想对特定项目执行更新和删除操作。我该怎么做

我试过这个：

var _local = (function () { 
    var Person = { 
        Srno: 0, 
        Name: "",
        Birthdate: "", 
        Email: "",
        Address: "",     
        Contact: "", 
    };

    this.clearuielements = function () { 
        var inputs = document.getElementsByClassName("c1"); 
        for (i = 0; i < inputs.length; i++) { 
            inputs[i].value = ""; 
        } 
    }

    this.saveitem = function() { 
        var lscount = localStorage.length; 
        var inputs = document.getElementsByClassName("c1"); 
        nameVal();

        console.log("aaaaaaaaaaaaaaaa");

        Person.Srno = inputs[0].value; 
        Person.Name = inputs[1].value; 
        Person.Birthdate = inputs[2].value; 
        Person.Email = inputs[3].value; 
        Person.Address = inputs[4].value; 
        Person.Contact = inputs[5].value;
        localStorage.setItem("Person_" + lscount, JSON.stringify(Person)); 

        location.reload(); 
    }

    function loaddata() { 
        var datacount = localStorage.length; 
        if (datacount > 0) 
        { 
            var render = "<table border='1'>"; 
            render += "<tr><th>Srno</th><th>Name</th><th>Birthdate</th><th>Email</th><th>Address</th><th>Contact</th></tr>"; 
            for (i = 0; i < datacount; i++) {
                var key = localStorage.key(i); 
                var person = localStorage.getItem(key); 
                var data = JSON.parse(person); 

                render += "<tr><td>" + data.Srno + "</td><td>" + data.Name + " </td>"; 
                render += "<td>" + data.Birthdate + "</td>"; 
                render += "<td>" + data.Email + "</td>"; 
                render += "<td>" + data.Address + "</td>"; 
                render += "<td>" + data.Contact + "</td></tr>"; 

            } 
            render+="</table>"; 

            dvcontainer.innerHTML = render; 
        } 
    }



    this.clearstorage = function() { 
        localStorage.clear(); 
        window.location.reload(); 
    }

    function nameVal() {
        document.getElementById("txtpname").focus();
        var n=document.getElementById("txtpname").value;
        var r;
        var letters = /^[a-zA-Z]+$/;
        if(n==null||n==""){
            alert("please enter user name");
            return null;
            n.focus();
        }
        else {
            if(n.match(letters)&&n!="") {
                r=ValidateEmail();
                return r;
            }
            else {
                alert("please enter alphabates");
                document.getElementById("txtpname").value="";   
                document.getElementById("txtpname").focus();
                return null;
            }
        }
    }

    function ValidateEmail()
    {
        var uemail=document.getElementById("txtpemail").value;
        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if(uemail.match(mailformat)) {
            alphanumeric();
        }
        else {
            alert("You have entered an invalid email address!");
            document.getElementById("txtpemail").value="";
            document.getElementById("txtpemail").focus();
            return null;
        }
    }

    function alphanumeric()
    { 
        var uadd=document.getElementById("txtpaddr").value;
        var letters = /^[0-9a-zA-Z]+$/;
        if(uadd==null||uadd==""){
            alert("plz enter address");

            uadd.focus();
        }
        else {
            if(uadd.match(letters)) {
                return true;
            }
            else {
                alert('User address must have alphanumeric characters only');
                document.getElementById("txtpaddr").value="";
                document.getElementById("txtpaddr").focus();
                return false;
            }
        }
    }

    function cntVal(){
        var n=document.getElementById("txtpmobile").value;
        var r1;
        var letters = /^\d{10}$/;
        if(n!==null||n!==""){
            if(n.match(letters))
            {
                r1=ValidateEmail();
                return r1;
            }
            else {
                alert("please enter contact number");
                document.getElementById("txtpmobile").value="";
                document.getElementById("txtpmobile").focus();
                return null;
            }
        }
        else {
            alert("please enter contact Number");
            return null;
            n.focus();
        }
    }

    return this; 
    window.onload = function () { 
        loaddata(); 
    }; 
})(); 

function saveitem(){
   console.log("SSSSS",_local);
    _local.saveitem();
}

function clearstorage(){
    _local.clearstorage();
}

function clearuielements(){
    _local.clearuielements();
}

var\u local=（函数（）{
var Person={
Srno:0，
姓名：“，
出生日期：“，
电邮：“，
地址：“，
联系人：“，
};
this.clearuielements=函数（）{
var输入=document.getElementsByClassName（“c1”）；
对于（i=0；i0）
{ 
var render=“”；
render+=“SrnoNameBirthdateEmailAddressContact”；
对于（i=0；i

我没有看到任何与存储相关的代码，只是表单构造。您应该将呈现代码与从

localStorage

加载、保存和清除数据的代码分开。然后你可以测试它。格式化代码更容易阅读这里有一些库可以实现你想要的。查看LocalStorage仅存储字符串，因此如果您想更改特定数据，您有2个选项。1）将存储的字符串解析为json更改它，并使用json.stringify再次保存它。2） 替换存储字符串上的特定字符串并再次保存。2是肮脏的方式