如何在页面刷新后保持图标处于选中状态

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

请注意，如果您有多个心，则需要使用一个类

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

在当前代码中，您需要

1. 将JSON.parse(localStorage.setItem('favorites', JSON.stringify(favorites))更改为
   仅localStorage.setItem('favorites', JSON.stringify(favorites))

2. 加载运行存储的收藏夹

建议的代码 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>