Javascript 我可以将JSON应用于当前gridster列表吗？

我有一个从服务器获取的已生成数据的列表。（我在

li

中生成了一些小部件）

在gridster演示中，我们使用此代码应用JSON中的大小和位置

$('.js-seralize').on('click', function () {
    gridster.remove_all_widgets();
    $.each(serialization, function () {
        gridster.add_widget('<li />', this.size_x, this.size_y, this.col, this.row);
    });
});

$（'.js seralize'）。在（'click'，函数（）{
gridster.remove_all_widgets（）；
$.each（序列化、函数（）{
添加小部件（“
”，this.size\ux，this.size\uy，this.col，this.row）；
});
});

在本例中，我们使用

gridster.remove_all_widgets（）这对我来说是个问题，我需要将数据项保存在某个地方，然后再将它们输出回来

在不使用
remove\u all\u widgets（）
函数的情况下，将JSON应用于当前列表的最佳解决方案是什么

UPD：我从asp mvc应用程序生成列表，我想在客户端的列表中添加大小和位置。对我来说，它看起来像：
$（'grister ul'）.apply（jsonString）
要将JSON应用于已存在的列表，我使用了以下代码：

 var CurrentGridState = `[{"col":1,"row":3,"size_x":3,"size_y":2},{"col":4,"row":3,"size_x":3,"size_y":2},{"col":1,"row":1,"size_x":6,"size_y":2}]`;


 $(function () { //DOM Ready
        var json = JSON.parse(CurrentGridState);
        $.each($('.gridster ul li'), function (item, value) {
            console.log(json[item]['col']);
            $(value).attr("data-col",json[item]['col']);
            $(value).attr("data-row",json[item]['row']);
            $(value).attr("data-sizex",json[item]['size_x']);
            $(value).attr("data-sizey",json[item]['size_y']);
        });

    $(window).trigger('resize');
       gridster =  $(".gridster ul").gridster({
            widget_margins: [10, 10],
           widget_base_dimensions: [140, 140],
           max_cols: 10,
           max_rows: 25,
            draggable: {
                stop: function (e, ui, $widget) {
                    //alert('drag!');
                }
            },
            resize: {
                stop: function (e, ui, $widget) {
                    $(window).trigger('resize');
                    serializeCurrentState();
                },
                enabled: true
            },
        }).data('gridster');
    });


现在还不清楚“将我的数据项保存到某个地方”是什么意思-如果你不删除，然后继续添加，你也可以阅读列表中已经存在的项目，否？编辑的帖子，观看upd部分，可能会让事情变得更清楚。
$('.js-seralize').on('click', function () {
    gridster.remove_all_widgets();
    $.each(serialization, function () {
        gridster.add_widget('<li />', this.size_x, this.size_y, this.col, this.row);
    });
});

 var CurrentGridState = `[{"col":1,"row":3,"size_x":3,"size_y":2},{"col":4,"row":3,"size_x":3,"size_y":2},{"col":1,"row":1,"size_x":6,"size_y":2}]`;


 $(function () { //DOM Ready
        var json = JSON.parse(CurrentGridState);
        $.each($('.gridster ul li'), function (item, value) {
            console.log(json[item]['col']);
            $(value).attr("data-col",json[item]['col']);
            $(value).attr("data-row",json[item]['row']);
            $(value).attr("data-sizex",json[item]['size_x']);
            $(value).attr("data-sizey",json[item]['size_y']);
        });

    $(window).trigger('resize');
       gridster =  $(".gridster ul").gridster({
            widget_margins: [10, 10],
           widget_base_dimensions: [140, 140],
           max_cols: 10,
           max_rows: 25,
            draggable: {
                stop: function (e, ui, $widget) {
                    //alert('drag!');
                }
            },
            resize: {
                stop: function (e, ui, $widget) {
                    $(window).trigger('resize');
                    serializeCurrentState();
                },
                enabled: true
            },
        }).data('gridster');
    });