Почему цвет не сохраняется, если localStorage корректен?

Я заставляю его сохранять цвет в localStorage, чтобы после обновления веб-страницы отображалось красное сердечко, если нравится, и никакого цвета, если не нравится. Но я не понимаю, почему оно не отображается. Я отладил и значения localSotage правильные.

Index.js


const color = ["#000000", "#FF0000"];
let colorIndex = parseInt(localStorage.getItem("colorIndex")) || 0;
console.log("Initial: " + colorIndex);

function like(elem) {
    const postId = elem.attributes["data-id"].value
    const csrftoken = getCookie('csrftoken');
    fetch(`like/${postId}`, {
            method: 'POST',
            headers: { 'X-CSRFToken': csrftoken },
            mode: 'same-origin'
        }).then(res => res.json())
        .then(data => {
            document.getElementById(postId).innerText = data.numLikes
            console.log(data.liked + ", color: " + color[data.numLikes - 1]);
            if (data.liked == true) {
                colorIndex = data.isLiked;
                document.getElementById(`icon-${postId}`).setAttribute("fill", color[colorIndex]);
                console.log("liked == true " + colorIndex);
            } else if (data.liked == false) {
                colorIndex = data.isLiked;
                document.getElementById(`icon-${postId}`).setAttribute("fill", color[colorIndex]);
                console.log("liked == false " + colorIndex);
            }
            localStorage.setItem("colorIndex", colorIndex);
        })
}

views.py

 if request.method == "POST":
        postId = Post.objects.get(id = id) # Almacena los id de cada post
        if not postId.likes.filter(id = request.user.id).exists(): # Si no existe un like por el usuario
            newStatus = True
            isLiked = 1
            postId.likes.add(request.user) # Añadelo
            postId.save()
        else:
            newStatus = False
            isLiked = 0
            postId.likes.remove(request.user) # Si no lo quitas
            postId.save()

        return JsonResponse({"liked": newStatus, "isLiked": isLiked, "id": id, "numLikes": postId.likes.count()},status=200)
    return JsonResponse({"message": "Wrong method"}, status=400)

Возможно, у вас проблемы с синтаксисом при установке атрибута.

Попытка:

setAttribute("style", "fill:" + color[colorIndex])

Помните, что это может переопределить любые другие свойства стиля, которые вы не включили, поэтому вы можете избежать этого, установив fill напрямую:

document.getElementById(`icon-${postId}`).style.fill = color[colorIndex]
Вернуться на верх