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

Question

I've copied data of a html table on page 1 in an array obj(arrData). And i've save that arrData into the session storage. Now on page 2, how do i display the data from the arrData to the html table. New in JS. Thanks in advance

PAGE 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);

});

PAGE 2

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

PAGE 2 JS

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

Answer 1

You need to use sessionStorage.setItem("foo", 12) rather than sessionStorage.foo = 12;

The latter is attaching a new property to the javascript object, not talking to the browser session API. When the page reloads, the object you attached is gone.

To get the item back, use sessionStorage.getItem

Mozilla docs for sessionStorage including setItem and getItem

Once you've done that, you will need a way of creating new table rows in the table. There are a multitude of frameworks for this purpose, but you can also build tables (with a few more steps than with other elements) yourself

How to insert row in HTML table body in Javascript?

Answer 2

As I understand from above, You have data in array of objects after var arrData = JSON.parse(sessionStorage.myArrData); , in below format..

arrData:

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

Now to display this data on Page 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;