Почему цвет не сохраняется, если 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]