腾讯云·社区
如何显示从会话到html表的数组数据？内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
- 回答 (2)
- 关注 (0)
- 查看 (68)
我在数组obj(ArrData)中复制了页面1中html表的数据。我已经把arrData保存到会话存储中了。现在，在第2页，如何显示从arrData到html表的数据。
第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);
你需要使用sessionStorage.setItem(“foo”，12)，而不是sessionStorage.foo=12；
后者是将一个新属性附加到javascript对象，而不是与浏览器会话API对话。当页面重新加载时，你所附加的对象将消失。
若要取回该项，请使用sessionStorage.getItem
用于会话存储的Mozilla文档，包括setItem和getItem
一旦你这样做了，你将需要一种在表中创建新表行的方法。用于此目的框架很多，但你也可以自己构建表 。
正如我从上面了解到的，在后面的对象数组中有数据。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;
HTML
扫码关注云+社区
领取腾讯云代金券