Как сделать, чтобы сработал localstorage для input при перезагрузке страницы?

Question

[Екатерина]

Всем привет! Помогите, пожалуйста, починить код - https://jsfiddle.net/tw7201ro/3/ не сохраняется при обновлении страницы (F5) стиль/нажатый чекбокс. Код:

<div id="compar">
<input type="checkbox" id="compareid_"
    onchange="compare_tov"
    onclick="save_checkbox('checkbox')">
  <label for="compareid_">
    <span></span>
    <i></i>
  </label>
</div>

function save_checkbox(name) {
 localStorage[name] = document.getElementById(name).checked ? 1 : 0
}
function load_checkbox() {
var div = document.getElementById('compar')
var input = div.getElementsByTagName('input')
										
for(var i = 0; i < input.length; i++)
	{
	var checkbox = input[i]
	checkbox.checked = parseInt(localStorage[checkbox.id], 10)
	}
}

#compar {
	width: 36px;
	height: 36px;
	position: absolute;
	top: 55px;
}

#compar input[type="checkbox"] {
	opacity: 0;
	position: absolute;
	z-index: -10;
	top: -20000px;
}

#compar label {
	display: inline-block;
	height: 36px;
	width: 36px;
	background: url(https://192.168.3.129/local/templates/pneumax-shop/components/bitrix/catalog.section/.default/compare_grey.png);
}

#compar label span {
	background: url(https://192.168.3.129/local/templates/pneumax-shop/components/bitrix/catalog.section/.default/compare_grey.png);
	display: none;
	height: 36px;
	width: 36px;
	}

#compar label i {
	background: url(https://192.168.3.129/local/templates/pneumax-shop/components/bitrix/catalog.section/.default/сравнить.png);
	display: none;
	height: 36px;
	width: 36px;
}

#compar input[type="checkbox"]:checked + label {
      background: url(https://192.168.3.129/local/templates/pneumax-shop/components/bitrix/catalog.section/.default/compare_grey.png);
    }

#compar input[type="checkbox"]:checked + label i {display: block;}
#compar input[type="checkbox"]:checked + label span {display: none;}

Comments

[Alex_mos]

А что вы пытаетесь сделать тут

function save_checkbox(name) {
 localStorage[name] = document.getElementById(name).checked ? 1 : 0
}

И зачем эта функция? Она же нигде не вызывается
load_checkbox()

[Екатерина]

Alex_mos, сохранить состояние чекбокса при checked

[Alex_mos]

Екатерина, вам стоит перечитать про работу с localstorage, мне кажется вы что то упускаете)) например localStorage.getItem() и localStorage.setItem()

И зачем функция load_checkbox() если она не используется

[Alex_mos]

Екатерина, и к тому же тут document.getElementById(name)
У вас же id не checkbox а compareid_

[Екатерина]

Alex_mos, в localStorage создаётся/перезаписывается item с именем, которое передаётся в качестве аргумента функции, и в него записывается состояние чекбокса, т.е. 1 если он checked, 0 если нет.

в переменную checkbox записывается input текущей итерации цикла
var checkbox = input[i]
ранее созданной переменной (в которой находится текущий чекбокс) устанавливается значение атрибута checked, который берётся с localStogare (localStorage[checkbox.id]) по id текущего эл-та (checkbox.id) используя десятичную систему счисления, второй аргумент в parseInt - указание системы исчисления

По логике всё должно работать....

[Alex_mos]

Екатерина, но функция где у вас var checkbox = input[i]
Нигде не используется, как вы ее вызываете?

[L1nks]

Екатерина как пытается сказать Alex_mos у вас функция load_checkbox нигде не вызывается в коде, который вы выложили.
Что ещё заметил у вас в коде:
`onchange` - должна принимать функцию ,а у вас в неё передается переменная, которая к тому же нигде не объявлена.
К тому же вы добавляете 2 обработчика `onchange` и `onclick` и они оба сработают, так сначала вызывается обработчик на click, потом на change.
Вам надо оставить 1 обработчик, скажем change.
Чтобы установить в localstorage значение, нужно передать 2 аргумента: название, значение
localStorage.setItem('checkboxValue', true)
Подробнее тут

В функцию save_checkbox не обязательно каждый раз передавать селектор, так как каждый раз у вас будет искаться этот элемент в доме.
Вы можете передать аргумент event в функция и взять значение из target'a

function save_checkbox(evt) {
  localStorage.setItem("checkbox", evt.target.checked)
}

[L1nks]

Возможно я ошибаюсь, но вроде не лучший вариант сейчас задавать обработчики напрямую в html.
Лучше это делать в js и вешать обработчики через addEventListener.
Например

const input = document.querySelector("#compareid_");
input.addEventListener("change", (evt) => {
    localStorage.setItem("checkbox", evt.target.checked);
})

[Alex_mos]

Екатерина, что бы не городить все что у вас есть, по сути вам нужно две вещи. При загрузке страницы проверять наличие/значение в localStorage, и потом производить манипуляции с checkbox и вносить изменения в localStorage.

[Антон Литвиненко]

L1nks, Alex_mos, Сорян что влажу, но с localstorage действительно можно работать как с обьектом, просто не рекомендуется:
https://developer.mozilla.org/en-US/docs/Web/API/W...

[Alex_mos]

Антон Литвиненко, можно, но написано что рекомендуется с помощью

[Антон Литвиненко]

Alex_mos, я ровно то же написал.

[Alex_mos]

Антон Литвиненко, да)) не обратил внимание)

[Екатерина]

Alex_mos, можешь подсказать, как в этом коде представить ID (compareid_<?= $arItem["ID"]; ?>):

$(document).ready(function(){
	document.getElementById('compareid_<?= $arItem["ID"]; ?>').onclick = function() {
	  if(document.getElementById('compareid_<?= $arItem["ID"]; ?>').checked) {
		localStorage.setItem('compareid_<?= $arItem["ID"]; ?>', "true");
	  } else {
		localStorage.setItem('compareid_<?= $arItem["ID"]; ?>', "false");
	  }
	}
	if (localStorage.getItem('compareid_<?= $arItem["ID"]; ?>') == "true") {
	  document.getElementById("compareid_<?= $arItem['ID']; ?>").setAttribute('checked','checked');
	}
});

Сам по себе код работает, даже с таким жутким представлением ID, но только на последнем товаре, если страница не обновляется, а по стрелке переходит туда сюда, он тоже работает. В общем избранно...