Issue displaying localStorage

JavaScript
1

I want the content of div to be remembered when the page is refreshed. I want to get that done using localStorage. currently, the content of “gridcontainer” always display every time the page is refreshed. Whenever “showme” content is view after refreshing the page it will always show the content of “gridcontainer”. I want to use localStorage to remember the previous content that has been viewed. For example, if I view the content of “showme” I want that content to be remembered when the page is refresh.

currently, storage() function seems to be working, however, the JSON data doesn’t display.

<div class="gridcontainer">
            <div><h4>Weak Against</h4></div>
            <div id="item1">Item1 </div>
            <div id="item2">Item2</div>
            <div id="item3">Item</div>
            <div id="discrip"></div>
   
        </div>



<div id="showme">
            <div><h4>Strong Against</h4></div>
            <div id="item1">Item1 </div>
            <div id="item2">Item2</div>
            <div id="item3">Item</div>
            <div id="discrip"></div>
   
        </div>


function storages(){
   var test1=document.getElementById("showme").innerHTML;
   var a=document.querySelector(".gridcontainer");
   localStorage.setItem("test",test1);
   var b=localStorage.getItem("test");
   a.innerHTML=b;
   console.log(a);

}
4

I have a function getitem5() that populate “showme”. I want the content to be remembered when the page is refreshed. current when item3 in “gridcontatiner” is click “gridcontainer” is hidden and “showme” is displayed. however, when the page is refresh gridcontainer is always displayed. Also, when I output to console console.log(b) from the storage function i get an empty container of “showme” as shown below.

<div id="showme">
            <div><h4>Strong Against</h4></div>
            <div id="item1">Item1 </div>
            <div id="item2">Item2</div>
            <div id="item3">Item</div>
            <div id="discrip"></div>
   
        </div>





function getitem5() {
    let xhr = new XMLHttpRequest();
    var image = document.createElement("img");
    var item2=document.getElementById("item2");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let data = JSON.parse(xhr.responseText);
            image.src = url + data.image;
            image.height = 200;
            image.width = 200;
            item2.innerText = data.name;
            item2.appendChild(image);

        }

    }
    xhr.open('GET', url);
    xhr.send();
}