Как сохранить css для сохранения при загрузке разных страниц или обновлении страницы
Я пытаюсь реализовать функцию сохранения поста или лайка, но css-стиль кнопки "нравится" или "сохранить" не применяется при обновлении или смене страницы. как я могу сохранить css-стиль, чтобы он сохранялся на разных страницах. Я использую django в бэкенде
вот мой вид в django:
def favourite(request, post_id):
user = request.user
post = Post.objects.get(id=post_id)
profile = Profile.objects.get(user=user)
is_favourite = False
if profile.favourite.filter(id=post_id).exists():
profile.favourite.remove(post)
is_favourite = False
else:
profile.favourite.add(post)
is_favourite = True
response = {
"is_favourite": is_favourite,
}
return JsonResponse(response)
Здесь находится html/css/js часть:
$(document).ready(function () {
$('.favourite-button').click(function (e) {
e.preventDefault();
var button = $(this);
var post_id = button.data('id');
var url = button.attr('href');
$.ajax({
type: 'POST',
url: url,
data: {
'csrfmiddlewaretoken': '{{ csrf_token }}',
},
success: function (response) {
if (response.is_favourite) {
button.find('i').addClass('liked');
} else {
button.find('i').removeClass('liked');
}
},
error: function (response) {
console.error('Error:', response);
}
});
});
});
.action-buttons i.liked{
color: var(--btn-color);
}
<div class="action-buttons">
<div class="interaction-buttons">
<span>
<a href="{% url 'like' post.id %}" class="like-button" data-id="{{ post.id }}">
<i class='bx bxs-heart {% if post.user_liked %} liked {% endif %}'></i>
</a>
</span>
<span><i class='bx bxs-comment-detail'></i></span>
<span><i class='bx bxs-share-alt'></i></span>
</div>
<div class="bookmark">
<span>
<a href="{% url 'favourite' post.id %}" class="favourite-button"
data-id="{{post.id}}">
<i class='bx bxs-bookmark'></i>
</a>
</span>
</div>
</div>