<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="controls_btns">
<button class="control" id="repeat_btn" onclick="toggleRepeat()">
<img src="{% static 'img/repeat.png' %}" alt="">
</button>
</div>
</body>
</html>
var repeat_btn = document.getElementById("repeat_btn")
var isRepeat = 1
var local = window.localStorage
if (local.getItem("isRepeat")) {
isRepeat = local.getItem('isRepeat')
if (isRepeat == 1) {
repeat_1()
} else if (isRepeat == 2) {
repeat_2()
} else {
repeat_3()
}
}
function toggleRepeat() {
if (isRepeat == 1) { // Switch from repeat 1 to repeat 2
repeat_2()
} else if (isRepeat == 2) { // Switch from repeat 2 to repeat 3
repeat_3()
} else { // Switch from repeat 3 to repeat 1
repeat_1()
}
local.setItem('isRepeat', isRepeat)
}
function repeat_1() {
repeat_btn.querySelector("img").src = "static/img/repeat.png"
isRepeat = 1
}
function repeat_2() {
repeat_btn.querySelector("img").src = "static/img/repeat-active.png"
isRepeat = 2
}
function repeat_3() {
repeat_btn.querySelector("img").src = "static/img/repeat1.png"
isRepeat = 3
}
Да, данные в localStorage сохраняются после нескольких перезагрузок.
В коде отсутствует явное удаление данных в localStorage после перезагрузки страницы. Возможно, проблема связана с настройками браузера, в особенности, если использованы определенные конфиденциальности или режим инкогнито.
Нужно добавить код, который будет очищать localStorage после перезагрузки страницы. Также стоит учесть, что проблемы могут возникать в браузерах с определенными настройками конфиденциальности или в режиме инкогнито.