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

Posted 2023-03-05

【中文标题】如何将编辑的数据存储在本地存储中？

【英文标题】：how to store edited data in local storage?

【发布时间】：2016-06-12 05:00:48

【问题描述】：

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

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("[phone]"));
        $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);
    

这是我的更新功能

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

这是我的本地存储阵列

[
    "email": "[e-mail]",
    "pass": "akhil@1",
    "name": "akhil",
    "car": "zen",
    "year": "2014",
    "member": "no",
    "mobile": "9033098795"
, 
    "email": "[e-mail]",
    "pass": "Smith@1",
    "name": "suresh",
    "car": "alto",
    "year": "2015",
    "member": "yes",
    "mobile": "9998789333"
, 
    "email": "[e-mail]",
    "pass@1": "akhil@1",
    "name": "rakesh",
    "car": "wagonr",
    "year": "2016",
    "member": "no",
    "mobile": "9033098794"
]

【问题讨论】：

您遇到了什么问题？哪个部分不工作？

数据正在绑定 ini 文本框，但如果我编辑绑定的数据，则新数据不会在本地存储中更新

@AkhilTrivedi 你试过在输入上设置change eventListener 吗？

在哪里使用更改？

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

【参考方案1】：

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

如果您想知道何时保存到本地存储，我想说这始终取决于您要做什么。

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

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

并更新您的 updateData 函数以使用 switch case 更新本地存储中的适当值。

但如果说您没有任何服务器存储机制或不打算使用任何服务器存储机制，您始终可以在提交表单时将表单数据保存到本地存储。

就像我之前说的“何时保存”确实符合您的要求。

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