使用本地存储在从另一个表保存的HTML TABLE中打印JSON,以便在另一个页面上打印表

在我的作业中,我必须使用来从用户输入中获取数据并将数据保存在本地存储中。我必须将这些数据从本地存储以水平表格式打印到其他页面上。为此,我编写了代码供用户输入并将数据保存在本地存储中

<style>
        data {
            color: #138bc2;
        }
    </style>
    <body>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
   <div id="POItablediv">
   <p>
   <input type="button" id="bt" value="Submit Data" onclick="submit()" />
   </p>
   <input type="button" onclick="insRow()" id="addPOIbutton" value="Add values"/><br/><br/>
   <table id="POITable" border="1">
   <thead>
       <tr>
           <td>WEEK NO</td>
           <td>Daily exercise</td>
           <td>calorie</td>
           <td>food</td>
            <td>Revision no</td>
           <td>Delete?</td>

       </tr>
       </thead>
       <tbody>
       <tr>
           <td><input size=25 type="text" id="weekbox"/></td>
           <td><input size=25 type="text" id="latbox"/></td>
           <td><input size=25 type="text" id="lngbox"/></td>
           <td><input size=25 type="text" id="lnbox"/></td>
           <td><input size=25 type="text" id="lntbox"/></td>
           <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>

       </tr>
       <tbody>
   </table>
   </body>
   <script>
   function deleteRow(row)
    {
        var i=row.parentNode.parentNode.rowIndex;
        if(i>1){
        document.getElementById('POITable').deleteRow(i);
        }

    }


    function insRow()
    {

        var x=document.getElementById('POITable');
        var new_row = x.rows[1].cloneNode(true);
        var len = x.rows.length;
        new_row.cells[0].childNodes[0].value = "";

        var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
        inp1.id += len;
        inp1.value = '';
        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.id += len;
        inp2.value = '';
        x.appendChild( new_row );
        var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
        inp3.id += len;
        inp3.value = '';
        var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
        inp4.id += len;
        inp4.value = '';
        x.appendChild( new_row );
    }
   function submit() 
   {
     var table = document.getElementById("POITable")
     var tableLen = table.rows.length           
     var data = {labels: [], alpha: [], beta: [],gamma:[]}

   for (var i = 1; i < tableLen; i++) 
  {
     data.labels.push(table.rows[i].cells[0].childNodes[0].value)
     data.alpha.push(table.rows[i].cells[1].childNodes[0].value)
     data.beta.push(table.rows[i].cells[2].childNodes[0].value)
     data.gamma.push(table.rows[i].cells[3].childNodes[0].value)
  }
 var alphadata = data
localStorage.setItem("quant", JSON.stringify(alphadata));

上面的代码用于接收用户输入并保存在本地存储中。我的目的是将数据从本地存储打印到垂直页眉中的另一页上,这意味着该表的左侧(通常)具有header()标签。

e<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<p id="showData"></p>
 </body>

<script>
function CreateTableFromJSON() {
    var myBooks =JSON.parse(localStorage.getItem("quant"));

    var col = [];
    for (var i = 0; i < myBooks.length; i++) {
        for (var key in myBooks[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }

    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1);                   // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");      // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < myBooks.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myBooks[i][col[j]];
        }
    }

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    }
    </script>
    </html>

当我单击第二页上的按钮时,表格未打印。它给了我空白页。任何线索将不胜感激。