Issue displaying localStorage

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);

}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

You are going to need to give more information here. Is this your only code? Where is your CSS and how are you calling the storages function? The html you provide currently is always going to be viewed until you have some way to hide one/both of them based on clicks or other conditions.

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();
}