Javascript 使用本地存储使用API构建收藏夹页面_Javascript_Html_Api

Javascript 使用本地存储使用API构建收藏夹页面

javascript html api

Javascript 使用本地存储使用API构建收藏夹页面,javascript,html,api,Javascript,Html,Api,我是Javascript的新手，最近我遇到了一个代码挑战，我学习了Catapi并使用该数据构建了一个小的演示。我必须以网格格式显示8张随机图像，然后有一个“收藏”按钮，将该照片添加到列表中，以便以后查看我已经完成了我的图片和网格布局，但我真的很难让收藏夹页面发挥作用。我花了两个星期的时间试图解决一些问题，但我找不到任何对我非常有用的资源。我试图做的是将所选图像添加到一个特殊阵列，将该阵列保存到本地存储，然后如果用户希望查看其收藏夹，则显示该特殊阵列。但我不确定这样做是否正确。我还从web上的A

我是Javascript的新手，最近我遇到了一个代码挑战，我学习了Catapi并使用该数据构建了一个小的演示。我必须以网格格式显示8张随机图像，然后有一个“收藏”按钮，将该照片添加到列表中，以便以后查看

我已经完成了我的图片和网格布局，但我真的很难让收藏夹页面发挥作用。我花了两个星期的时间试图解决一些问题，但我找不到任何对我非常有用的资源。我试图做的是将所选图像添加到一个特殊阵列，将该阵列保存到本地存储，然后如果用户希望查看其收藏夹，则显示该特殊阵列。但我不确定这样做是否正确。我还从web上的API中提取所有内容，我没有任何数据保存在JSON文件或类似文件中

我只是想知道是否有人可以为我指出正确的方向，如何继续这方面的工作。我想知道我是否遗漏了什么，或者是否有更好的方法来做这件事。同样，我只是一个初学者，我只知道HTML、CSS和一些基本的Javascript

感谢所有愿意帮助我的人

Javascript

let favoriteButton = document.querySelectorAll(".favorite");
let removeFavoriteButton = document.querySelectorAll(".remove-favorite");
let imageURL = 'https://api.thecatapi.com/v1/images/search?limit=8&api_key=906f9f50-3b14-4630-a89a-a0421d1e5317&size=thumb';

const favoriteImages = [];

function grabData() {
   const fetchImages = fetch(imageURL);

   const main = document.getElementById("main");

   main.innerHTML = "<p>Pics are coming!</p>";

   fetchImages.then(response => {
      return response.json();
   }).then(data => {
      main.innerHTML = catUrlList(data);
   });

   function catUrlList(data) {
      let catImgUrl = data.map(image => `<li><img id ="${image.id}"src=${image.url} alt="This kitty must be a shy one :(">
      <button class="favorite" id="${image.id}">I Love This!</button></li>`).join("\n");
      return `<ul>${catImgUrl}</ul>`
   }
   
};

function addFavPhoto() {
   //event listener for button click 
   const main = document.getElementById("main");
   main.onclick = function (event) {
      event.preventDefault();

      const element = event.target;
      
      if (element.nodeName === 'BUTTON') {
         console.log("Fav Button Added!")
         //Grab ID from specific photo

         //Add specific photo to array above

      }
   }
}

   //add array to local storage
   localStorage.setItem('favoriteImages', JSON.stringify(favoriteImages));
   
function viewFavorites() {
   //event listener for button click 

   //Pull up array 

   //Display photos list along with remove button
}
function removeFavPhoto() {
   //event listener for button click 

   //remove photo from array
}

grabData();

addFavPhoto();

let-favoriteButton=document.queryselectoral（“.favorite”）；
让removeFavoriteButton=document.querySelectorAll（“.removeFavoriteButton”）；
让imageURL为空https://api.thecatapi.com/v1/images/search?limit=8&api_key=906f9f50-3b14-4630-a89a-a0421d1e5317&尺寸=拇指'；
常量favoriteImages=[]；
函数grabData（）{
const fetchImages=fetch（imageURL）；
const main=document.getElementById（“main”）；
main.innerHTML=“图片来了！”；
获取图像。然后（响应=>{
返回response.json（）；
})。然后（数据=>{
main.innerHTML=catUrlList（数据）；
});
函数caturlist（数据）{
让catImgUrl=data.map（image=>`
我喜欢这个！`。加入（“\n”）；
返回`${catImgUrl}`
}
};
函数addFavPhoto（）{
//按钮单击的事件侦听器
const main=document.getElementById（“main”）；
main.onclick=函数（事件）{
event.preventDefault（）；
常量元素=event.target；
if（element.nodeName==='BUTTON'）{
log（“添加了Fav按钮！”）
//从特定照片中获取ID
//将特定照片添加到上面的阵列
}
}
}
//将阵列添加到本地存储
setItem（'favoriteImages'，JSON.stringify（favoriteImages））；
函数viewFavorites（）{
//按钮单击的事件侦听器
//上拉阵列
//显示照片列表和删除按钮
}
函数removeFavPhoto（）{
//按钮单击的事件侦听器
//从阵列中删除照片
}
抓取数据（）；
addFavPhoto（）；

HTML


Cat代码挑战
看那些猫
查看您喜爱的图像

假设您可以存储图像的路径/url，并且不必担心用户清空其本地存储，那么您描述的方法似乎可以工作。当触发

addFavPhoto

时，获取图像名称和扩展名，将其添加到数组中并保存到localstorage。当用户想要查看收藏夹时，获取保存的localstorage数组，构建元素并添加保存到本地存储的适当的

src

。从代码中的注释来看，似乎您对如何完成这一切有了很好的想法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <title>Cat Code Challenge</title>
</head>
<body class="jumbotron text-center">
    <h1>Look At All Those Cats</h1>
    
    <div class="grid">
        <div id="main"></div>
    </div>
    <div id="favorites">
        <button class="find-favorites">View Your Favorite Images</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>
</html>