Show table data on another page in HTML table

Question

My problem is this: I created an array from the table that I already have, and saved the column that I want into an array, and then saved it to localStorage using JSON.stringify:

function createArray(){
        var arrayPlayerName = [];
        var count = 1;
        while(count<=playerNum){
            arrayPlayerName.push(document.getElementById('playertable').rows[count].cells[1].innerHTML);
            count++;
        }

        localStorage.setItem("playerNameArray", JSON.stringify("arrayPlayerName"));
    }

(playerNum is a variable with a fixed number used in other methods, and "getElementById" works).

After that, I want to show this data in another table in another HTML document. So the following HTML code:

<table class="myTable">
    <thead>
        <tr class="row">
            <th colspan="3">Array List</th>
        </tr>
    </thead>
</table>

And this is the script:

    var storedPlayerArray = JSON.parse(localStorage.getItem("playerNameArray"));

    tablegenerate (storedPlayerArray);

    function tablegenerate (list) {
        for(i=0; i<playerNum;i++){
            var $formrow = '<tr><td>'+list[i]+'</td></tr>';
            $('.myTable').append($formrow);
        }
    }

I'm not sure what I'm doing wrong. Thanks in advance.

EDIT: I call the createArray function with a button, and I go to the second page with another button. The second page should load directly.

EDIT2: , , "tablegenerate".

Answer 1

, :

var storedPlayerArray = JSON.parse(localStorage.getItem("playerNameArray"));

function tablegenerate (list) {
    for(var i=0; i<list.length;i++){
        var $formrow = $('<tr><td>'+list[i]+'</td></tr>');
        $('.myTable').append($formrow);
    }
}
$(document).ready(function(){
    tablegenerate (storedPlayerArray);
})

---

createArray. JSON.stringify , .

:

localStorage.setItem("playerNameArray", JSON.stringify("arrayPlayerName"));

:

localStorage.setItem("playerNameArray", JSON.stringify(arrayPlayerName));