比较lokalStorage键和任何元素ID，如果相等则向该元素添加类

Question

我正在尝试为图片库建立书签/收藏夹功能，以便用户可以将某些图片标记为收藏夹（保存到localStorage）。

所以，目前我确实通过onClick="addFavorites(this)"在每个元素上调用了一个函数，而该函数是

function addFavorites(element) {
    var bild = element.id;
    if (localStorage.getItem(bild) === null) {
        localStorage.setItem(bild, bild);
    } else {
        localStorage.removeItem(bild);
    }
}

到目前为止，效果很好。现在，我希望对选定的图片也进行视觉标记（尤其是在页面重载时），并且我正在努力寻找解决方案。是否可以将lokalStorage键与任何元素ID进行比较并添加一个类f.e. favorite等于元素。

也许还有更简单的方法可以解决此问题？

任何帮助或想法都会很棒！

Answer 1

假设您的图片都有识别类别，例如"picture"。然后，您可以在页面加载时运行类似的内容：

var pictures = document.querySelectorAll(".picture");
pictures.forEach(picture => {
    if (localStorage.getItem(picture.id)) {
        picture.classList.add("favorite");
    }
});

您还需要稍微更改addFavorites：

function addFavorites(element) {
    var bild = element.id;
    if (localStorage.getItem(bild) === null) {
        localStorage.setItem(bild, bild);
        element.classList.add("favorite");
    } else {
        localStorage.removeItem(bild);
        element.classList.remove("favorite");
    }
}

然后，当然，您可以用CSS样式管理favorite类的外观。