将 localStorage 键与任何元素 id 进行比较，如果等于则将 class 添加到元素

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);
    }
}

到目前为止一切正常。现在我想让所选的图片也被视觉标记（尤其是在页面重新加载时），我正在努力寻找解决方案。是否有可能将 localStorage 键与任何元素 id 进行比较并添加 class f.e。 favorite 等于元素。

也许还有更简单的方法来解决这个问题？

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

Answer 1

假设您的照片都有一个标识 class，例如 "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 class 的外观。

将 localStorage 键与任何元素 id 进行比较，如果等于则将 class 添加到元素

Compare localStorage keys with any element id and add class to element if equals

javascript

bookmarks

image

function