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

debugcn 发表于 Dev

贝塞洛

我正在尝试为图片库构建书签/收藏夹功能，以便用户可以将某些图片标记为收藏夹（保存到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进行比较，并favorite在元素相等时将class fe添加到元素中。

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

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

艾罗斯

假设您的图片都有一个识别类，例如"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");
    }
}

然后，当然，您可以使用favoriteCSS样式来管理类的外观。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。