Javascript 使用自定义按钮将行数据从DataTable加载到localStorage时出错

我正在使用DataTables Jquery插件，并尝试使用创建自定义按钮插件。在这里，我可以将行数据加载到本地存储中。我们将此按钮称为“内部保存”

"buttons": [
            {
              text: 'Save Internally',
              action: function ( e, dt, node, config ) {
                var data = dt.rows( { selected: true } ).data();
                localStorage.setItem("datatable1", JSON.stringify(data));
                  }
                }
              ]

当我实现和测试它时，我似乎无法将任何内容存储到本地存储中。我尝试了console.log-ing行数据和JSON.stringify，以查看数据是否可以从事件中提取，但随后我得到了错误

TypeError:Converting circular structure to JSON

。如果没有JSON.stringify，它会给我

对象

我尝试使用

                for (var key in data) {
                  if (data.hasOwnProperty(key)) {
                    console.log(key);

查看对象是否有任何属性或关键点，但它没有

行在前端的结构方式如下所示

<div class="jumbotron container" id="viewtableresult">
<table id="example" class="display table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Name</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Name</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </tfoot>
</table>
</div>

---

并且能够找到具有“header”和“body”属性的数据。现在我需要弄清楚如何将item（）这个数据设置到localStorage中，因为它仍然没有存储到localStorage中。

当您调用

.data（）

时，您将得到一个包含所有行和函数的对象。您只需要行，因此应该调用

.toArray（）

我还创建了JSFIDLE示例，在该示例中，我将保存到本地存储并从中读取：

存储和加载数据的相关代码：

 $('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        {
            text: 'Export',
            action: function ( e, dt, node, config ) {
            var data = dt.rows( { selected: true } ).data().toArray();
            var json = JSON.stringify(data)
            localStorage.setItem('exportedData', json);
            }
        },
        {
            text: 'Load',
            action: function ( e, dt, node, config ) {
            var data = JSON.parse(localStorage.getItem('exportedData'));
            dt.clear();
            dt.rows.add(data).draw();
            }
        }
    ]
} );

---

美好的我将投票赞成在显示数据方面提出正确的观点。但有一个缺点是，如果有两行，它由一个逗号分隔，并且在数组中，项有逗号。另外，由于某些原因，我似乎仍然无法将其存储到本地存储中。好的，谢谢。这就解决了问题。我会接受这个答案，因为它解决了问题。但是，似乎还有一种方法可以使用API方法按钮来解决此问题

var data = dt.rows( { selected: true } ).data().toArray();

 $('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        {
            text: 'Export',
            action: function ( e, dt, node, config ) {
            var data = dt.rows( { selected: true } ).data().toArray();
            var json = JSON.stringify(data)
            localStorage.setItem('exportedData', json);
            }
        },
        {
            text: 'Load',
            action: function ( e, dt, node, config ) {
            var data = JSON.parse(localStorage.getItem('exportedData'));
            dt.clear();
            dt.rows.add(data).draw();
            }
        }
    ]
} );