显示从会话到HTML表的数组数据

Question

我已经在数组obj（arrData）中复制了第1页html表的数据。 而且我已经将arrData保存到会话存储中。 现在在第2页上，如何显示从arrData到html表的数据。 JS的新功能。 提前致谢

第1页JS

var arrData=[];               
$("#checkout").on('click',function(){

$("#table tr").each(function(){
    var currentRow=$(this);

    var col1_value=currentRow.find("td:eq(0)").text();
    var col2_value=currentRow.find("td:eq(1)").text();
    var obj={};

    obj.col1=col1_value;
    obj.col2=col2_value;

    arrData.push(obj);
   sessionStorage.myArrData=JSON.stringify(arrData);
 });
console.log(arrData);

});

第2页

<table class="table table-checkout" id="table">
<thead>
  <tr>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
</thead>
<tbody>
</tbody>

第2页JS

var arrData = JSON.parse(sessionStorage.myArrData);

Answer 1

您需要使用sessionStorage.setItem（“ foo”，12）而不是sessionStorage.foo = 12;。

后者是将新属性附加到javascript对象，而不是与浏览器会话API通讯。 页面重新加载时，您附加的对象不见​​了。

要取回该项目，请使用sessionStorage.getItem

适用于sessionStorage的Mozilla文档，包括setItem和getItem

完成此操作后，您将需要一种在表中创建新表行的方法。 有许多用于此目的的框架，但是您也可以自己构建表（步骤比其他元素多一些）

如何在Javascript的HTML表主体中插入行？

Answer 2

从上面我了解到，在var arrData = JSON.parse(sessionStorage.myArrData);之后，对象数组中有数据var arrData = JSON.parse(sessionStorage.myArrData); ，格式如下。

arrData：

[
{col1:"Item1", col2:"quantity1"},
{col1:"Item1", col2:"quantity1"},
...
]

现在在第2页上显示此数据

var rows = "";
arrData.map((row)=>{
   var row = '<tr><td>'+row.col1+'</td><td>'+row.col2+'</td></tr>';
   rows = rows+row;
})
var tbody = document.queryselector('#table tbody');
tbody.innerHTML = rows;