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

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；现在，单击 "add row" 为第一个 value 打印 ok，但之后它会打印两个old 和 new 值。而且，我只想要 old 输入下方的新条目。提前致谢

Answer 1

您需要清除 table，因为您正在显示 .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;
  }
}

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

While displaying its also print old Data from local storage

javascript

arrays

json

local-storage

input-field