How to pass an array variable into a new window through javascript

Question

I am launching an html page when users click a button. I need to be able to pass in an array of addresses to the new window so that I can load them into a table, however I have been unable to find any way to pass an array over to the new window.

My most recent attempt looks like the following:

<button onclick="openWindow(['Joe Smith\n1 Address\nCity 12345',
  'Joe Smith\n2 Address\nCity 12345'])">Button</button>

function openWindow(addresses){
   var myWindow = window.open("NewPage.html");
   myWindow.addresses = addresses;
}

And then in NewPage.html I've got:

<script type="text/javascript">
   function bodyLoaded() { //gets called when the body loads
      var addresses;
      alert(addresses);
   }
</script>

I always get undefined in the alert on the new window. I did confirm that I am getting the addresses if I set up an alert in the openWindow() function.

I've tried several other things as well, including using localStorage (How to pass an array to a new page using javascript?) altho I don't know if I did it correctly. I also tried executing the function to load the table on the new window from the openWindow function (passing in the addresses variable) but I keep getting errors saying "Error: Object doesn't support property or method". For example:

function openWindow(addresses){
   var myWindow = window.open("NewPage.html");
   myWindow.loadTable(addresses); //the loadTable function exists in a .js file
}

Ideally I just want to pass a single array to the new window but I've been stuck on this for a while now. Any assistance or suggestions would be greatly appreciated.

Answer 1

One possibility is to pass the array of params as a query in the url. So something like this:

var myWindow = window.open("NewPage.html?addresses[0]=Joe Smith\n1 Address\nCity 12345&addresses[1]=Joe Smith\n2 Address\nCity 12345");

Then in javascript using this function

<script type="text/javascript">
   function bodyLoaded() { //gets called when the body loads
      var urlParams = new URLSearchParams(window.location.search);

      var addresses = urlParams.get('addresses'));
      alert(addresses);
   }
</script>

Edit:

Also localstorage works according to this answer: (How to pass an array to a new page using javascript?)

window.localStorage.setItem("cart", JSON.stringify(cart)); // Saving
var cart = JSON.parse(window.localStorage.getItem("cart")); // Retrieving

Answer 2

The new window is open by code so the code has some control over that window. Try something like this.

function openWindow(addresses) {
  var myWindow = window.open("newpage.html");
  myWindow.onload = function() {
    var myDiv = this.document.createElement('div');
    this.document.body.appendChild(myDiv);
    for (var i = 0, a; a = addresses[i]; ++i) {
      myDiv.innerHTML += a;
    }
  }
}