Распечатать данные в таблицу, используя localstorage в jQuery

Question

Данные печатаются в моей таблице, но обнаружены две проблемы.

Примечание. В localStorage Данные сохраняются в правильном формате и в соответствии с требованием. При получении данных из localStorage в таблицу возникают проблемы.

1. Я использую переменную для вывода данных в таблицу из localstorage, но когда я нажимаю «добавить», она снова печатает предыдущий массив с новой строкой, например, если у меня есть 10 строк в localstorage и если я нажимаю добавить еея просто добавлю новую строку вместо того, чтобы добавить 10 предыдущих и 1 новую всего 11 строк.

2. Я использую localstorage, потому что, если страница обновлена, данные все равно будут отображаться в таблице, но когда я обновлю данныене отображается в таблице, однако хранится в localstorage, это означает, что я не использую правильный метод для полученияItem из localstorage

Вот мой скрипт:

var productData = [];

var productData = JSON.parse(localStorage.getItem("products"));

require(['jquery'],function(){
   jQuery(document).ready(function() {
     var data = '';
     jQuery("#addbutton").click(function(){
        var sku = jQuery('#get_product').val();
        var getQuantity = jQuery("input[name='qty']").val();
         jQuery('.configurable').each(function () {
             sku+='-'+jQuery(this).val()
         });
        var productData2 = [];
            productData2.push({'qty': getQuantity,  'name': data.pr.name, 'sku': sku});
            if(productData == null){
                localStorage.setItem("products", JSON.stringify(productData2));
                productData = JSON.parse(localStorage.getItem("products"));
            }else{
                productData = productData.concat(productData2);
                localStorage.setItem("products", JSON.stringify(productData));
            }
            var result = JSON.parse(localStorage.getItem('products'));
            jQuery.each(result,function (key, value) {
            jQuery("#tabledata").append('<tr><td>' + value.name + '</td><td>' + value.sku + '</td><td>' + value.qty + '</td></tr>');
            });
        });
    });

});

Answer 1

Для ответов, пожалуйста, проверьте эту ссылку

1. Таблица не очищена, поэтому она добавляет данные в список

2. Локальное хранилище работает как положено.

$(function() {
  $("#addButton").click(function() {
    var productData = JSON.parse(localStorage.getItem("products"));
    var productData2 = [];
    var i = Math.floor(Math.random() * 100);
    productData2.push({
      'qty':  i,
      'name': 'name ' + i,
      'sku': 'sku ' + i
    });
    if (productData) {
      productData = productData.concat(productData2);
    } else {
      productData = productData2;
    }

    localStorage.setItem("products", JSON.stringify(productData));
    DisplayTable();
  });
});

function DisplayTable() {
  jQuery("#tabledata").html(""); //Clear the existing data
  var result = JSON.parse(localStorage.getItem("products"))
  jQuery.each(result, function(key, value) {
    jQuery("#tabledata").append('<tr><td>' + value.name + '</td><td>' + value.sku + '</td><td>' + value.qty + '</td></tr>');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<button id="addButton">Add Button</button>
<br/>
<table id="tabledata">
</table>