使用本地存储在单击时将 JSON 数据从一个页面传递和显示到另一个页面

Question

我一直在尝试使用本地存储在点击时将 JSON 数据从一个页面显示到另一个页面。

例如，用户单击一本书的特定图像，然后将他们带到 book.html 显示图像和书名的位置（来自 json 文件）

FIGMA 原型 - https://www.figma.com/proto/VAFgj0JQVX0YLt3WyZ12el/Untitled?node-id=5%3A5&scaling=min-zoom

script.js

const petsData = [{
  name: "Story Book",
  species: "Jean Lumier", //THIS IS THE JSON FILE
  photo: "a.jpg"
},
{
  name: "Barksalot",
  species: "Dog",
  href:"href.img,
  photo: "https://learnwebcode.github.io/json-example/images/dog-1.jpg"
},

];



function petTemplate(pet) {
  
return `
<div class ="image-grid">
   <div class="animal">
   
    <img class="pet-photo " src="${pet.photo}" >
   
      
       <div class="olay" onclick="location.href='${pet.href}';" style="cursor: pointer;">
       <div id="mydiv">
  
      <h2 class="pet-name">${pet.name}
      
      
      <h1 class="species">${pet.species}

      </div>
       <div></div></div>
      </div>
   </div>

  
`;
}

谢谢。

Answer 1

我将其设置为单页演示：https://stackblitz.com/edit/web-platform-uzc5rj

由于您的 JSON 没有 ID，您可以在 book.html 链接中引用数组中的位置。像这样：

<a href='book.html?book=1'><img of book /></a>

然后在book.html中

<div id='book_details'></div>
   <script>
let bookData = localStorage.getItem('bookData');
 bookData = JSON.parse(bookData)

    const urlParams = new URLSearchParams(window.location.search);
    const bookPos = urlParams.get('book');
    
   
      let book = bookData[bookPos]
      let bookHtml =  `
    <div class ="book-html">
    <h1>${book.name}  </h1>
    <p>${book.species} </p>
    </div>
    `;
    
    document.getElementById('book_details').innerHTML = bookHtml;
 
  </script>