如何在頁面刷新后檢查圖標

Question

所以我制作了一個帶有圖標的 div，當用戶單擊該圖標時，電影的 id 被推送到本地存儲中。 因此，當用戶刷新頁面時，我希望該圖標保持一顆完整的心，而不是一顆空心。 我怎么能這樣做？

var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
// add class 'fav' to each favorite
const whiteHeart = 'fa fa-heart-o fa-2x';
const blackHeart = 'fa fa-heart fa-2x';
const button = document.querySelector('#heart_icon');

$('#heart').click(function() {
  const movie_id = $(this).attr('data-id');
  index = favorites.indexOf(movie_id);
  if (!movie_id) return;
  // item is not favorite
  if (index == -1) {
    favorites.push(movie_id);
    button.className = blackHeart;
    // item is already favorite
  } else {
    favorites.splice(index, 1);
    button.className = whiteHeart;
  }
  // store array in local storage
  JSON.parse(localStorage.setItem('favorites', JSON.stringify(favorites)));
})

<div id="heart" data-id="ID1"> <i id="heart_icon" class="fa fa-heart-o fa-2x"></i> </div>

Answer 1

請注意，如果您有多個心臟，則需要使用 class

$('.heart').click(function() {

在您當前的代碼中，您需要

1. 改變
   JSON.parse(localStorage.setItem('favorites', JSON.stringify(favorites))到localStorage.setItem('favorites', JSON.stringify(favorites))

2. onload 運行存儲的收藏夾

建議代碼https://plungjan.name/SO/heartslocalstorage.html

let favorites;
const toggleIcon = ($icon, id) => {
  const isFav = favorites.indexOf(id) !== -1; // or includes for non-IE11 (polyfill on my site)
  $icon
    .toggleClass("fa-heart-o", !isFav)
    .toggleClass("fa-heart", isFav); // swap classes
};
$(function() {
  favorites = JSON.parse(localStorage.getItem('favorites')) || [];

  $('.heart').on("click", function() {
    const id = $(this).attr('data-id');
    const $icon = $(this).find("i");
    if (favorites.indexOf(id) === -1) favorites.push(id); // save the movie
    else {
      const index = favorites.indexOf(id); // get the movie position
      favorites.splice(index, 1); // and delete it from favourites
    }
    toggleIcon($icon, id);
    // store array in local storage
    localStorage.setItem('favorites', JSON.stringify(favorites));
  })

  $('.heart[data-id]').each(function() { // set the classes on ALL hearts
    const id = $(this).data("id");
    const $icon = $(this).find("i");
    toggleIcon($icon, id);
  });
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="heart" data-id="ID1"> <i id="heart_icon" class="fa fa-heart-o fa-2x"></i> </div>
<div class="heart" data-id="ID2"> <i id="heart_icon" class="fa fa-heart-o fa-2x"></i> </div>
<div class="heart" data-id="ID3"> <i id="heart_icon" class="fa fa-heart-o fa-2x"></i> </div>