我如何单独访问存储在本地存储中的数组的每个项目？

Question

下面的代码从食物中获取图像及其名称 api。一旦用户点击“喜欢”按钮，我就可以将这些图像存储在本地存储中。但是我想取回存储的图像和名称数据并将它们显示在收藏夹选项卡中。但我似乎无法做到这一点..有什么帮助吗？

        let myFavMeals=[]
   function getRandomMeal(){
 fetch('https://api.spoonacular.com/recipes/random? 
  number=10&apiKey=b354ffb530c5444da1eec4b02a3146be').then((data)=>{
  console.log(data)
  return data.json()
   }).then((completedata)=>{
 console.log(completedata.recipes)
  let data1=""
  completedata.recipes.forEach((recipe) => {
    const {
      id,
      title,
      readyInMinutes,
      extendedIngredients,
      servings,
      image,
      dishTypes,
      instructions,
    } = recipe;
      data1+=`  
      <div class="meal-header">
          <img src=${recipe.image} alt=${recipe.title} >
      </div>
      <div class="meal-body">
          <h6>${recipe.title}</h6>
          <p class="show">see recipes</p>
          <button class="fav-btn">
              <i class="fa fa-heart"></i>
          </button>
      </div>
      <div class="holder">
      <div class="meal-desc">
      <p>ready in : ${recipe.readyInMinutes} minutes</p>
      <center><h6>instructions</h6></center>
      <p>${recipe.instructions}  </p>
      </div>
      </div>`      
    })
    const meal=document.querySelector(".meal")
    meal.innerHTML=data1
   const holder=document.querySelector(".holder")
const show=document.querySelectorAll(".show")
show.forEach(shows=>{
    showcounter=0
    shows.addEventListener("click",()=>{
      holder.style.display="block"
      showcounter++
      if(showcounter== 2) {
      holder.style.display="none"
      }
    })
  })
const favBtns=meal.querySelectorAll(".fav-btn i")
const images = document.querySelectorAll('.meal-header > img')
favBtns.forEach((favBtn,i)=>{
  favBtn.addEventListener("click", ()=>{
    favBtn.classList.add("active")
    console.log(images[i].src, images[i].alt)     
    myFavMeals.push(images[i].src, images[i].alt)
    localStorage.setItem("myFavMeals", JSON.stringify(myFavMeals))
    showMeal()
})
})
      
 }).catch((err)=>{
  console.log(err)
    })
}
getRandomMeal()
    function showMeal(){
      let favmeal= JSON.parse(localStorage.getItem("myFavMeals"))
      favmeal.forEach(favmeals=>{
        let meallist=""   
        meallist+=`<ul>
             <li><img src=${favmeal} alt=${favmeal[i].alt}><span>${favmeal[i].alt}</span></li>
         </ul>`
       
         document.querySelector(".fav-meals").innerHTML+=meallist
      })
       

      }

Answer 1

您可以使用 object 文字将数组中的收藏夹保存为 objects：

myFavMeals.push({src: images[i].src, alt: images[i].alt})

然后使用键 src 和 alt:

在循环中访问它们

function showMeal() {
  let favmeal = JSON.parse(localStorage.getItem("myFavMeals"));
  favmeal.forEach(favmeal => {
    let meallist = "";
    meallist += `<ul>
             <li><img src=${favmeal.src} alt=${favmeal.alt}><span>${favmeal.alt}</span></li>
         </ul>`;

    document.querySelector(".fav-meals").innerHTML += meallist;
  });
}

我如何单独访问存储在本地存储中的数组的每个项目？

how do i access each item of an array stored in local storage individually?

javascript

arrays

local-storage