Display local storage variables on different html elements

Question

I would like to know how I can display a local storage variable (Both variables are different). I can fetch both variables but display only at a 1 element. If you look at the full code I added comments too.

!ISSUE FIXED! Solution add another script tag and add another local storage to exactly the same

storage js

   const petsData {[

    {
              name: "Meowsalot",
              species: "Cat",
              photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
              }

];

//actual storage 
function saveBook(name, photo) {
  localStorage.setItem("name", name);
  window.location.href = "name.html"


}



<div class="olay" onclick="saveBook('${pet.photo}','${pet.name}');" style="cursor: pointer;"> //on click method to fetch variables

Display variables js

<body>
    <div id="result"> //NEED the 2nd variable to display on this div
    </div>
    <img src="" id="photo" />
    <script>
        if (typeof(Storage) !== "undefined") {
          var name = localStorage.getItem('name');
          var imageName = localStorage.getItem("name");
          var imageEl = document.getElementById("photo"); //this is the first variable display
          imageEl.src = imageName 
        } else {
          document.getElementById("photo").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
      
      
      </script>
</body>

Does this answer your question? [How do I store an array in localStorage?](https://stackoverflow.com/questions/3357553/how-do-i-store-an-array-in-localstorage) — caramba, Nov 26 '20 at 05:03

score 0 · Answer 1 · answered Nov 26 '20 at 05:02

0

I am not sure if I understand your issue correctly, but the localStorage works exactly the way you are using - setItem to set some data and the getItem to retrieve it. Apart from this, I can see one issue in your code that your saveBook function is defined as saveBook(name, photo) but you are calling it as saveBook('${pet.photo}','${pet.name}');. The order of parameters are changed. Maybe that might be the root cause of the issue.

answered Nov 26 '20 at 05:02

Anshuman

11
2

No sorry that's not it I am fetching both variables I just need to know how to display it . – Luis Maximus Nov 26 '20 at 05:07
Use var img = document.createElement('img'), add img.src = , and then use document.getElementById().appendChild(img). Do same thing for other value as well. – Anshuman Nov 26 '20 at 11:53

Display local storage variables on different html elements

1 Answers1