How to pass data between pages?

Question

First Web page contains a button 'click' (where id ="btn") and when button is clicked I want to show on another Web page content (json files) in div (where id="animal-info"). When button is clicked again new content (next json) will appear in div on that second Web page. I tried with local-storage first, but searching on web I realised that I should use javascript websocket. I am new in sharing data between pages so I could use some help in this please.

var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");


btn.addEventListener("click", function(){

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET','http://10.0.9.243/animals-'+ pageCounter + '.json');
ourRequest.onload = function(){
  var ourData = JSON.parse(ourRequest.responseText);
  renderHTML(ourData);
};
ourRequest.send();
pageCounter++;
});

function renderHTML(data) {
  var htmlString  = document.createElement("div");
  for (i=0; i < data.length; i++){
    let pText = document.createTextNode(data[i].name);
    let pElement = document.createElement("p");
    pElement.append(pText);
    htmlString.append(pElement);
    htmlString.classList.add('containers') // new Line added
    }
  animalContainer.append(htmlString);
  
  }
 <h1>Press for number</h1>
        <button type="button" id="btn" class="blink"> click</button>
        <div id="animal-info"></div>
         <!--<p>to je broj: <span id="my"></span></p>-->
         <script src="skripta.js"></script>

 <h1>Press for number</h1>
        <button type="button" id="btn" class="blink"> click </button>
        <div id="animal-info"></div>
         <!--<p>to je broj: <span id="my"></span></p>-->
         <script src="skripta.js"></script>

<h2>Numbers:</h2>
<div id="animal-info"></div>



<script src="skripta.js"></script>