javascripthtmldomdata-transfer-objects

Using JavaScript to move a div from one page to another on click event

I have a page with several divs, each one a photo of a cat and some text and other info (it's for a cat adoption agency page). Each div has a onclick which calls a JavaScript function and then transfers to a different page (going from page with many cats to page with a single cat).

I have tried a variety of ways to move the clicked on div to the new page but still not successful. I am currently making 2 calls, one when the user clicks on the cat pic, which saves the div to localstorage and then when the new page is loaded a second function is called to try and read and append that div into the new page. Here are the relevant code pieces.

function loadCatProfile() {
  var cat = localStorage.getItem("catProfile");
  var mydoc = document.getElementById("placeholder");

  mydoc.append(cat);
}

function saveCatProfile(profile) {
  localStorage.setItem("catProfile", profile);
  window.location.href = "/singlecat.html";
}

Multi-Cat page that the user clicks....

<!DOCTYPE html>
<html>
  <head>
    <script src="/core/jscript.js"></script>
  </head>

  <body>
    <div class="profile" onclick="saveCatProfile(this)" style="cursor: pointer">
      <img src="/images/martin.webp" < />
      <p>Martin</p>
      <p>8 meses</p>
    </div>

    <div class="profile" onclick="saveCatProfile(this)" style="cursor: pointer">
      <img class="cat-image" src="/images/vimes.webp" < />
      <p id="cat-name">Sir Vimes</p>
      <p class="cat-age">8 meses</p>
    </div>
  </body>
</html>

New single cat page that tries to read


<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="/core/jscript.js"></script>
  </head>

  <body>
    <main>
      <div id="placeholder">
        <p>test</p>
      </div>
    </main>

    <script>
      loadCatProfile();
    </script>
  </body>
</html>

Tried saving then asigning the saved data to innerHTML of destination page, tried appending the saved div as child, read way too many web pages that were close in helping but not successful. This is a plain html/css javascript website, no frameworks or other libs.

Solution

  • Your approach of saving the clicked div to localStorage will work, but issue lies in how you're retrieving the element. When you save the entire div to localStorage, it's stored as a string. However, directly appending this string won't work because it's not a DOM element.

    So basically you need to save the div's inner HTML to localStorage and then reconstruct it on the target page.

    When you set/save items to local storage you need save inner HTML not the div.

    function saveCatProfile(profile) {
  localStorage.setItem("catProfile", profile.innerHTML);
  window.location.href = "/singlecat.html"; 
}

    After that you can access that saved component by creating this kind a function.

        function loadCatProfile() {
      var anyName= localStorage.getItem("catProfile");

if(anyName)
{

}
else
{

}}