如何將編輯後的數據存儲在本地存儲中？

Question

這是我的功能，它綁定文本框中的數據，我想用本地存儲更新數據，我想存儲新的數據。
請指導我如何在給定的點發布在本地存儲的新數據

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

這是我更新功能

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": "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" 
}] 

Answer 1

我不看到你在這裏面臨任何問題，因爲你已經掌握了「如何保存」的部分。

如果你想知道什麼時候保存到本地存儲，我會說這總是取決於你正在嘗試做什麼。

在大多數情況下，你可以使用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)); 

並更新updateData功能使用開關的情況下更新您的localStorage適當的值。

但是，如果你說沒有任何服務器存儲機制或者沒有計劃任何存儲機制，你可以隨時在表單提交時將表單數據保存到本地存儲。

正如我之前所說的'何時保存'真的取決於您的要求。

您也可以使用庫autoStorage，它可以幫助您在表單提交時存儲整個表單數據，並在用戶再次訪問該頁面時檢索它們。