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

Question

[Alex-Broudy]

Пытаюсь сделать смену вида сетки на странице (список / сетка) при клике на кнопку. При клике на кнопку добавляется класс .cards и вид сетки меняется, при повторном клике возвращается к исходным, но при перезагрузке страницы в local Storage все фиксируется, а на странице отображается по умолчанию списком контент.

Подскажите, что добавить и что сделать, чтобы при перезагрузке отображался последний измененный вид сетки?

сам код:

jQuery('.vid').click(function(e)
	{
		var listing = jQuery(this).closest('.listing');
		var list_items = listing.find('.list_items');
		var vid_setki =  localStorage.getItem('vid_setki');
		console.log('click');
		if (list_items.hasClass('cards'))
			{
			localStorage.setItem("vid_setki", "список");
			list_items.removeClass('cards');
			}
		else 
			{
				localStorage.setItem("vid_setki", "сетка");
				list_items.addClass('cards);
			}
	});

Comments

[Андрей]

Сделайте проверку на изменение сетки. Т.е. если localStorage пуст он отображает дефолт сетку, иначе сетку из localStorage.

[Alex-Broudy]

Андрей, ну проверку то я сделаю, а вот после перезагрузки страницы что будет отображаться?
скажем, при клике по кнопке смены вида сетки - вид поменялся за счет добавления класса cards классу list_items, если кликнуть еще раз, то меняется на дефолт и остается только класс list_items, но если класс был добавлен - после перезагрузки страницы у меня все по дефолту становится и присутствует только класс list_items, а хотелось бы, чтобы если класс был добавлен до перезагрузки страницы, чтобы он был добавлен и после перезагрузки

прошу простить за воду )

[Андрей]

<div className={`list_items ${localStorage.getItem('grid') && cards}`} >

Если значение по ключу grid не пустое, к классу list_items добавится cards.
Читайте доку, там много полезной инфы.

[Андрей]

Alex-Broudy, блин, чет я попутал написал Вам решение на реакте. Но на jQuery тоже можно. Просто делайте проверку на наличие сетки в localStorage.

if(localStorage.getItem('grid')){
list_items.addClass('cards');
}

[Alex-Broudy]

Андрей, спасибо за помощь и наводку! Немного изучил документацию и разобрался. Получилось реализовать следующим образом:

$(document).ready(function()
{
	$('.vid').click(function(e)
	{
		var listing = $(this).closest('.listing');
		var list_items = listing.find('.list_items');
		var cart_line = listing.find('.cart_line');
		var vid_setki =  localStorage.getItem('vid_setki');
		
		if (list_items.hasClass('cards'))
			{
				localStorage.setItem("vid_setki", "список");
				list_items.removeClass('cards');
			}
		else 
			{
				localStorage.setItem("vid_setki", "карты");
				list_items.addClass('cards');
			}
	});
	var vid_setki = localStorage.getItem('vid_setki');
	if(vid_setki == 'карты') {
		$('.list_items').addClass('cart');
	}
});