Как правильно поставить localStorage в скрипт?

Question

[Екатерина]

Всем привет! Помогите правильно поставить localStorage в скрипт. У меня почему-то не срабатывает, и при обновлении страницы теряется класс актив. Код:

function compare_tov(id)
			{
				var chek = document.getElementById('compareid_'+id);
				if (chek.checked)
				{
					//Добавить
					var AddedGoodId = id;
					$.get("/local/ajax/list_compare.php",
						{
							action: "ADD_TO_COMPARE_LIST", id: AddedGoodId},
						function(data) {
							$('#my_compare_list_count').html(data);
							var activeID = $('.comparTov_'+id).html('<img src="image2.png" />').addClass('active');
								console.log(activeID);
								localStorage.getItem("active", activeID);
						}
					);
				}
				else
				{
					//Удалить
					var AddedGoodId = id;
					$.get("/local/ajax/list_compare.php",
						{
							action: "DELETE_FROM_COMPARE_LIST", id: AddedGoodId},
						function(data) {
							$('#my_compare_list_count').html(data);
							var activeID = $('.comparTov_'+id).html('<img src="image1.png" />').removeClass('active');
								console.log(activeID);
								localStorage.removeItem("active", activeID);
						}
					);
				}
			}

Comments

[Александр Епихин]

А где вы добавляете значение в localStorage?

[Екатерина]

Александр Епихин, вот тут:

var activeID = $('.comparTov_'+id).html('<img src="image2.png" />').addClass('active');
                console.log(activeID);
                localStorage.getItem("active", activeID);

[Екатерина]

Александр Епихин, пыталась вот так, но тоже не сработало:

$(document).ready(function() {
           var inputCompareTov = {
               id: $("this").load("#compareid_<?= $arItem['ID']?>"),
               };
               console.log(inputCompareTov);

           var spanCompareTov = {
               class: ".comparTov_<?= $arItem['ID']?>",
           };
               console.log(spanCompareTov);
    
           $('inputCompareTov').click(function() {
               $('spanCompareTov').toggleClass('active');
               if (localStorage.getItem('spanCompareTov') == 'active') {
                   localStorage.removeItem('spanCompareTov', "active");
               } else {
                   localStorage.setItem('spanCompareTov', "active");
                }
           });
       });

[Александр Епихин]

Здесь нет кода добавления значения в localStorage.
Значение добавляется так:
localStorage.setItem("active", activeID);
А вот ваш код:
localStorage.getItem("active", activeID);
он достает значение и не совсем правильный, второй аргумент не нужен

P.S. Я про сообщение через один выше

[Екатерина]

Александр Епихин, localStorage.setItem("active", activeID);
не срабатывает, консоль говорит, что кода localStorage просто нет. А который самый нижний мой скрипт, он подставляет ID не того товара, почему так получается, я тоже не пойму...

[Александр Епихин]

Покажите вывод консоли

[Екатерина]

Александр Епихин, Вот:

Это при втором скрипте:
{id: '.compareid_3890'}id: ".compareid_3890"[[Prototype]]: Object
(index):3611 {class: '.comparTov_3890'}class: ".comparTov_3890"[[Prototype]]: Object

Это при первом скрипте:
a.fn.init [span.comparTov_4187.active, selector: '.comparTov_4187', prevObject: w.fn.init(1), context: document]
0: span.comparTov_4187
context: document
length: 1
prevObject: w.fn.init [document, selector: '', context: document]
selector: ".comparTov_4187"
[[Prototype]]: Object(0)

a.fn.init [span.comparTov_4187, selector: '.comparTov_4187', prevObject: w.fn.init(1), context: document]
0: span.comparTov_4187
context: document
length: 1
prevObject: w.fn.init [document, selector: '', context: document]
selector: ".comparTov_4187"
[[Prototype]]: Object(0)

Answer 1

[inFureal]

Для добавления используется localStorage.setItem('active', activeId).
Для удаления - localStorage.removeItem('active')

Answer 2

[Alex_mos]

А что у вас хранится в activeID, или что пытаетесь сохранить?

Comments

[Екатерина]

Я пытаюсь сохранить изменения при активном классе:

var activeID = $('.comparTov_'+id).html('<img src="image2.png" />').addClass('active');
                console.log(activeID);
                localStorage.getItem("active", activeID);

var activeID - это класс, в который я вставляю другое изображение, когда '.comparTov_'+id активен

[Екатерина]

код php/ html:

<input <?= $checked; ?> type="checkbox" id="compareid_<?= $arItem['ID']; ?>" data-id="<?= $arItem['ID']?>" onchange="compare_tov(<?= $arItem['ID']; ?>);">
	<label for="compareid_<?= $arItem['ID']; ?>" style="display: block; width: 36px; height: 36px; position: absolute; top: 55px;">
		<span class="comparTov_<?= $arItem['ID']; ?>" style="background:url(image1.png);"></span>
	</label>

[Alex_mos]

Екатерина, не совсем понимаю, зачем класс хранить в локалсторадж. Может там лучше хранить массив объектов у которых появился активный класс. И соответственно удалять их если активный класс убирается. Если я правильно понял задачу)

[Екатерина]

Alex_mos, да задачу правильно поняли)) А не подскажите, как правильно это написать, ну или намекните, а то я уже всю голову сломала, а под таким углом даже не смотрела...

[Alex_mos]

Екатерина, грубо говоря, список юзеров, вы кликаете на одного получаете к примеру его data-id и проверяете есть ли у него активный класс, если есть то этот data-id добавляете в массив, а этот массив в локалсторадж с с ключем user например.
Пример как с корзиной, откройте и посмотрите добавляется что то в локалсторадж https://incode.pro/demo/icp_example20/

[Екатерина]

Скажите, пожалуйста, почему сейчас после перезагрузки не сохраняется класс active:
console показывает правильно id товара, но класс затирается

function compare_tov(id)
			{
				var chek = document.getElementById('compareid_'+id);
				if (chek.checked)
				{
					//Добавить
					var AddedGoodId = id;
					$.get("/local/ajax/list_compare.php",
						{
							action: "ADD_TO_COMPARE_LIST", id: AddedGoodId},
						function(data) {
							$('#my_compare_list_count').html(data);
							$('.comparTov_'+id).html('<img src="сравнить.png" />').addClass('active');
						}
					);
				}
				else
				{
					//Удалить
					var AddedGoodId = id;
					$.get("/local/ajax/list_compare.php",
						{
							action: "DELETE_FROM_COMPARE_LIST", id: AddedGoodId},
						function(data) {
							$('#my_compare_list_count').html(data);
							$('.comparTov_'+id).html('<img src="compare_grey.png" />').removeClass('active');
						}
					);
				}
			}


	$(document).ready(function() {
		var inputCompareTov = $(".check-compare");
		var compareID = inputCompareTov.data('id');
			console.log(compareID);

		var spanCompareTov = $(".spancompare");
		var compareSpan = spanCompareTov.data('id');
			console.log(compareSpan);

		$('compareID').click(function() {
			$('compareSpan').toggleClass('active');
			if (localStorage.setItem('compareSpan') == 'active') {
				localStorage.removeItem('compareSpan', "active");
			} else {
				localStorage.setItem('compareSpan', "active");
			 }
		});
	});

<input <?= $checked; ?> type="checkbox" id="compareid_<?= $arItem['ID']; ?>" class="check-compare" data-id="<?= $arItem['ID']?>" onchange="compare_tov(<?= $arItem['ID']; ?>);">
	<label for="compareid_<?= $arItem['ID']; ?>" >
		<span class="comparTov_<?= $arItem['ID']; ?> spancompare" data-id="<?= $arItem['ID']?>" style="background:url(compare_grey.png);"></span>
	</label>

[Alex_mos]

Екатерина, нужно сделать проверку получить элементы и получить данные из локалсторадж и сравнить если data-id элемента совпадает с id из локалсторадж то этому элементу добавляем класс active если нет то убираем класс.

Наверное как то так. Если в общих чертах

[Алексей Абрамов]

Екатерина,

if (localStorage.setItem('compareSpan') == 'active')

нужно поменять на getItem

[Екатерина]

Алексей Абрамов, поменяла, но не помогло...

[Alex_mos]

Екатерина, можете скинуть скрин того что у вас сохраняется в локалсторадж

[Алексей Абрамов]

Екатерина,

$('compareID').click(function() {
      $('compareSpan').toggleClass('active');

и вот тут не нужны кавычки)

[Екатерина]

Alex_mos,

[Екатерина]

Алексей Абрамов, тоже не помогло...

[Alex_mos]

Екатерина, я что то не вижу что бы у вас туда что то добавлялось из вашей задачи)

[Екатерина]

У меня только вот эта инфа выходит и всё:
Alex_mos,

[Alex_mos]

Екатерина, у вас в ключ добавляется просто класс элемента

[Alex_mos]

Екатерина, создайте переменную с массивом, куда при клике на карточку товара добавляйте id карточки в этот массив, и этот массив с ключем carts (например) localstorage.setItem('carts', data) добавляете в локалсторадж

[Екатерина]

Alex_mos, ну так в зависимости от класса меняется html разметка (с img). Или требуется, чтобы не только класс запоминался, но и html в нем?

[Alex_mos]

Екатерина, а потом пишете проверку(что бы при перезагрузке не слетало)
Получаете все карточки товара, получаете массив из локалсторадж, проверяете есть ли карточки товара с id которые лежат в локалсторадж. Если есть то добавляете класс active. И все будет применяться

[Екатерина]

Alex_mos, я дико извиняюсь, похоже вечер и похоже совсем я затупила... у меня не получается сделать как вы предложили. Даже с использованием массива с товарами на странице (data-box-item) и проверкой на класс active? localStorage ничего не запоминает... Можно Вас попросить помочь с кодом, похоже я сама уже так запуталась, что перестала понимать где ноги растут...

[Alex_mos]

Екатерина, Щас попробую)

в общем как то так, если на скорую руку.

https://codepen.io/alex-maskall/pen/jOLQgrb?editor...

Если это то что нужно, получается сохраняется в локалсторадж и при перезагрузки класс не слетает.