При отображении его также распечатать старые данные из локального хранилища

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