将表中的选定行保存在本地存储中

我正在使用带有kendo网格和jquery的数据表,我需要通过复选框获取所选行的值,因此我在事件发生变化时捕获事件并返回被标记的行的值,类似这样:

function onChange(e) {
    var rows = e.sender.select();
    rows.each(function(e) {
        var grid = $("#grid").data("kendoGrid");
        var dataItem = grid.dataItem(this);

        console.log(dataItem);
    })
};

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            pageSize: 10,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                }
            },
            schema: {
                model: {
                    id: "ProductID"
                }
            }
        },
        pageable: true,
        scrollable: false,
        persistSelection: true,
        sortable: true,
        change: onChange,
        columns: [{
                selectable: true,
                width: "50px"
            },
            {
                field: "ProductName",
                title: "Product Name"
            },
            {
                field: "UnitPrice",
                title: "Unit Price",
                format: "{0:c}"
            },
            {
                field: "UnitsInStock",
                title: "Units In Stock"
            },
            {
                field: "Discontinued"
            }
        ]
    });
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="example">
    <div id="grid"></div>
</div>
</body>
</html>

我现在需要的是能够存储如果选择了它们的值,我想将它们保存在本地存储的数组中,但是我不知道该怎么做,因为我需要保持此数组的更新和消除那些不再标记的想法?

PD: I also attached the original dojo of the example https://dojo.telerik.com/IciMekAn