如何将编辑数据存储在本地存储中？

This is my function which binds data in textbox and i want to update data using this in local storage, i want to store new data.
Please guide me how to publish new data in local storage at given point

这是我的功能，它绑定文本框中的数据，我想在本地存储中使用此更新数据，我想存储新数据。请指导我如何在给定点发布本地存储中的新数据

function view(email) {
    $("#one").remove();
    var e = email;
    var $header = $("<h2 align='center' id='tab'>Edit User Details</h2><br>");
    data = JSON.parse(localStorage.getItem('person'));
    var $foot = $("<div class='modal-footer'>&copy; akhil trivedi</div>");
    myObject = data.filter(function(person) {
        return person.email == email;
    });

    var $div1 = $("<div class='col-md-7 col-md-offset-3'></div><br>");
    for (var i = 0; i < myObject.length; i++) {
        var $line2 = $("<form class='form-group'></form>");
        if (myObject[i].member == "yes") {
            $line2.append($("<input type='checkbox' class='checkbox-inline' id='test' name='test' checked='checked' disabled>&nbsp;&nbsp;<label>Already Member</label><br><br>").val(myObject[i].member));
        } else {
            $line2.append($("<input type='checkbox' class='checkbox-inline' id='test' name='test'>&nbsp;&nbsp;<label>Want to become Member ?</label><br><br>").val(myObject[i].member));
        }
        //$line2.append( $("<input type='checkbox' class='checkbox' id='test' name='test' checked='checked'><label>Member ?</label><br><br>").val(emp.member));
        $line2.append($("<input  type='text' class='form-control' value='' required><br><br>").val(myObject[i].name));
        $line2.append($("<input  type='email' class='form-control' value='' required><br><br>").val(myObject[i].email));
        $line2.append($("<input  type='tel' id='phone' class='form-control' value='9' name='phone' required><br><br>").val(myObject[i].mobile).mask("(999) 999-9999"));
        $line2.append($("<input type='submit' onclick='updatedata(\"" + myObject[i].email + "\")'>"));
        $line2.append($("<br>"));
        $line2.append($("<br>"));
        $line2.append($("<br>"));
        $line2.append($("<select class='form-control'><option>select</option><option>zen</option><option>alto</option><option>wagonr</option></select>"));
        $line2.append($("<br>"));
        $line2.append($("<select class='form-control'><option>select</option><option>2013</option><option>2014</option><option>2015</option></select>"));
        $line2.append($("<br>"));
        $line2.append($("<br>"));
        $line2.append($("<h2 align='center' id='tab'>Car Owned</h2>"));
        $line2.append($("<table class='table table-responsive'><thead><th>Car</th><th>year</th><th>delete</th></thead><tr><td>" + myObject[i].car + "</td><td>" + myObject[i].year + "</td><td><a href='' onclick='deletecar(\"" + myObject[i].email + "\")'><img src='images/delete.png'></a></td></tr></table>"));
        $div1.append($header);
        $div1.append($line2);
        $div1.append($foot);
        $div1.appendTo(document.body);
    }
}

This is my update function

这是我的更新功能

function updatedata(email) {
    debugger
    var newd = [{
        "name": myObject[0].name,
        "email": myObject[0].email,
        "phone": myObject[0].mobile,
        "car": myObject[0].car,
        "year": myObject[0].year,
        "member": myObject[0].member
    }];
    localStorage.setItem("person", JSON.stringify(newd));
}

this is my local storage array

这是我的本地存储阵列

[{
    "email": "akhiltrivedi@outlook.com",
    "pass": "akhil@1",
    "name": "akhil",
    "car": "zen",
    "year": "2014",
    "member": "no",
    "mobile": "9033098795"
}, {
    "email": "anandpatel@gmail.com",
    "pass": "Smith@1",
    "name": "suresh",
    "car": "alto",
    "year": "2015",
    "member": "yes",
    "mobile": "9998789333"
}, {
    "email": "contact@akhiltrivedi.com",
    "pass@1": "akhil@1",
    "name": "rakesh",
    "car": "wagonr",
    "year": "2016",
    "member": "no",
    "mobile": "9033098794"
}]

1 个解决方案

#1

I dont see you facing any problems here as you have got the 'how to save' part figured.

我没有看到你在这里遇到任何问题，因为你已经得到了“如何保存”部分。

If you are wondering on when to save to the localstorage I would say it is always depends on what you are trying to do.

如果你想知道何时保存到本地存储，我会说它总是取决于你想要做什么。

In most cases you can use the onblur or onchange DOM event to save the value of the input to the localstorage. This can be particularly useful when you want to save an un submitted form so that user can resume when he visits the page again.

在大多数情况下，您可以使用onblur或onchange DOM事件将输入值保存到localstorage。当您想要保存未提交的表单以便用户在再次访问该页面时可以恢复时，这可能特别有用。

$line2.append($("<input  type='text' class='form-control' value='' onchange='updateData(\"name\",this.value)' required><br><br>").val(myObject[i].name));

And update your updateData function to use a switch case to update appropriate value in your localstorage.

并更新您的updateData函数以使用switch case来更新localstorage中的适当值。

But in cases where say you donot have any server storage mechanism or not planning for any you can always save the form data to the local storage on submission of the form.

但是，如果您没有任何服务器存储机制或没有规划任何服务器存储机制，您可以在提交表单时始终将表单数据保存到本地存储。

Just like I said before 'when to save' is really upto your requirement.

就像我之前所说的“什么时候保存”真的符合你的要求。

You could also use a library autoStorage which can help you store entire form data on form submission and retrieve them when user visits the page again.

您还可以使用库autoStorage，它可以帮助您在表单提交时存储整个表单数据，并在用户再次访问页面时检索它们。

#1