在显示它的同时还打印来自本地存储的旧数据

Question

  function addrow() {
            debugger;
            var person = [];
            if (localStorage.person1 != null && localStorage.person1 !=undefined) {
                var person = JSON.parse(localStorage.person1);


            }

            var name = document.getElementById('name').value;
            var city = document.getElementById('city').value;
            person.push({ 
                pname: name,
                pcity: city
            });


            localStorage.setItem('person1', JSON.stringify(person));
            bind();
        }

    function bind() {
        debugger;
        var per_list = JSON.parse(localStorage.getItem('person1'));
        for (i = 0; i < per_list.length; i++ ) {
                var table = document.getElementById('ptable');
                var row = table.insertRow(0);
                var col1 = row.insertCell(0);
                var col2 = row.insertCell(1);
            col1.innerHTML = per_list[i].pname;
            col2.innerHTML = per_list[i].pcity;
            }

        }

我有两个字段name 和city；现在，单击“添加行”打印ok 为第一个value，但随后它同时打印old 和new 值.. 和，我只想要old 输入下方的新条目.. 在此先感谢

Answer 1

您需要清除表格，因为您正在显示 .bind 函数中的所有元素。

function bind() {
  debugger;
  var per_list = JSON.parse(localStorage.getItem('person1'));
  // clear the table
  var table = document.getElementById('ptable');
  for (var i = 0, rows = table.rows.length; i < rows; i++) {
    table.deleteRow(0)
  }
  // fill the table
  for (i = 0; i < per_list.length; i++) {
    var row = table.insertRow(0);
    var col1 = row.insertCell(0);
    var col2 = row.insertCell(1);
    col1.innerHTML = per_list[i].pname;
    col2.innerHTML = per_list[i].pcity;
  }
}