Estoy haciendo que guarde el color en localStorage para ver un corazón rojo si le gusta y ningún color si no le gusta después de actualizar la página web. Pero no entiendo por qué no se muestra. He depurado y los valores de localSotage son correctos.
Índice.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); }) }vistas.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)Es posible que tenga un problema de sintaxis con la configuración de su atributo.
Probar:
setAttribute("style", "fill:" + color[colorIndex])Tenga en cuenta que esto puede anular cualquier otra propiedad de estilo que no incluya, por lo que puede evitarlo configurando el relleno directamente:
document.getElementById(`icon-${postId}`).style.fill = color[colorIndex]La otra cosa que podría estar causando problemas es que el relleno solo se configura en la función Me gusta (), presumiblemente respondiendo a hacer clic en un botón Me gusta de algún tipo. Si la página se vuelve a cargar, no hay nada en el código que se muestra que probará si la publicación ha gustado: el conjunto de colores en la función Me gusta () no persistirá después de que se vuelva a cargar una página, ya que no se ha llamado.
La mejor manera de manejar esto es en la propia plantilla de django, ya que está almacenando los datos 'me gusta' en la base de datos. Primero, en su opinión, obtenga una lista de publicaciones que le gustan
En este ejemplo, 'me gusta' es un conjunto de registros pasado a su plantilla desde su vista. Asumo que Me gusta es un campo ManyToMany que vincula a los usuarios con las publicaciones:
user_likes = Likes.objects.filter(id = request.user.id)Puede hacer que el filtro sea más específico para la eficiencia según los requisitos de la página. Pase el resultado de este filtro a la plantilla a través de contexto.
Cuando vengas a mostrar la publicación, haz algo como:
<div class="post"> ... <img id="icon-{{post.id}}" class=" {% if post in user_likes %} liked {% else %} notliked {% endif %} "> </div>Y tenga sus clases definidas en su CSS para incluir sus valores de relleno, por ejemplo,
.liked { fill:#FF0000 } .notliked { fill:#000000 }Esto manejará su coloración sin tener que hacer ninguna llamada javascript de tipo ajax