Question

我将表单数据作为对象（动态）存储到本地存储中。这是数据在本地存储中的外观

[{其中 “fname”： “AKHIL”， “L-NAME”： “Mankala”， “年龄”： “24”， “性别”： “男”， “移动”： “7093117454”， “UNAME”：” akhilm”， “PASS1”： “Mraverage @ 1”， “电子邮件”： “akhil@gmail.com”}，{ “FNAME”： “万人迷”， “L-NAME”： “巴雷拉”， “年龄”： “25” ， “性别”： “男”， “移动”： “7093117454”， “UNAME”： “davidb”， “PASS1”： “大卫＆安培; 1”， “电子邮件”： “david@yahoo.com”}]“< / p>

现在我想编辑/更新和删除这些数据。我该怎么做？

这是我的本地存储代码。

$(document).ready(function() {
$("submit").click(getInfo)
});

function getInfo(e) {

var temp = {
    fname: $('#fname').val(),
    lname: $('#lname').val(),
    age: $('#age').val(),
    gender: $("#gender").val(),
    mobile: $("#mobile").val(),
    uname: $("#uname").val(),
    pass1: $("#pass1").val(),
    email: $("#email").val()
};

if (localStorage.getItem('myDb') === null) {
    var arr = [];
    arr.push(temp);
    localStorage.setItem('myDb', JSON.stringify(arr));
} else {
    var arr = JSON.parse(localStorage.getItem('myDb'));
    arr.push(temp);
    localStorage.setItem('myDb', JSON.stringify(arr));
    return false;
}
}

我从localstorage获取了数据并使用此代码创建了一个表

var mainObj = JSON.parse(localStorage.getItem('myDb'));

var k = '<tbody>'
for(i = 0;i < mainObj.length; i++){
    k+= '<tr>';
    k+= '<td>' + mainObj[i].fname + '</td>';
    k+= '<td>' + mainObj[i].lname + '</td>';
    k+= '<td>' + mainObj[i].age + '</td>';
    k+= '<td>' + mainObj[i].gender + '</td>';
    k+= '<td>' + mainObj[i].mobile + '</td>';
    k+= '<td>' + mainObj[i].uname + '</td>';
    k+= '<td>' + mainObj[i].pass1 + '</td>';
    k+= '<td>' + mainObj[i].email + '</td>';
    k+= '<td>' + '<input class="edit" type="button" value="Edit" 
 onclick="Edit()">' + '</td>'
    k+= '<td>' + '<input class="edit" type="button" value="Delete" 
 onclick="delete()">' + '</td>'
    k+= '</tr>';
}
k+='</tbody>';
document.getElementById("tableData").innerHTML = k;

看起来像这样

Click here to see the image

现在我应该能够按行编辑/更新和删除

Answer 1

尝试这个。

 function clear() {
        window.localStorage.clear();
        window.localStorage.removeItem("myDb");
    }

Answer 2

这是获取数据的方法

var myDb = JSON.parse(localStorage.getItem('myDb'));

然后你可以像这样更新它

myDb.fname = 'new name';

然后再次保存

localStorage.setItem('myDb', JSON.stringify(myDb));

马上

var myDb = JSON.parse(localStorage.getItem('myDb'));
myDb.fname = 'new name';
localStorage.setItem('myDb', JSON.stringify(myDb));
localStorage.removeItem('myDb'); // to remove it

这是一个简单的例子，如何从表中编辑对象

var table = document.getElementById("tableData"); // get the table
var currEditProp = ''
var currRow = null;

table.addEventListener('click', function(ev) {
  if(ev.target.tagName==='TD') {
    ev.target.setAttribute('contenteditable', 'true');
    currRow = ev.target.dataset.row;
    currEditProp = ev.target.dataset.prop;
  }
  if(ev.target.classList.contains('delete')) {
    table.getElementsByTagName('tbody')[0].removeChild(ev.target.parentElement.parentElement);
    currRow = ev.target.dataset.row;
    delete myDb[currRow];
  }
});

table.addEventListener('keypress', function(ev) {
  if (ev.keyCode == 13) {
    myDb[currRow][currEditProp] = ev.target.textContent;
    ev.target.removeAttribute('contenteditable');
  }
});

更改

....
k+= '<td>' + mainObj[i].fname + '</td>';
....

到

var k = '';
for(var row in mainObj) {
   k += '<tr>';
   for(var prop in mainObj[row]) {
     k += '<td data-row="'+ row +'" data-prop="' +prop + '">' + mainObj[row][prop] + '</td>';
   }
    k+= '<td><input data-row="'+row+'" class="delete" type="button" value="Delete"></td>'
    k+= '</tr>';
}
document.getElementById("tableData").innerHTML = k;

Answer 3

在添加新项目之前，您需要删除项目或清除localStorage。要清除整个存储空间，只需添加moment.js 要根据您的情况删除特定项目，请使用localStorage.clear();

localStorage.removeItem("item")

如何编辑和删除动态存储的本地存储对象

3 个答案: