Javascript-форум - localstorage - сохранять класс элемента

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - localstorage - сохранять класс элемента (https://javascript.ru/forum/jquery/63265-localstorage-sokhranyat-klass-ehlementa.html)

localstorage - сохранять класс элемента

Здравствуйте!

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

Есть две кнопки, переключатели вида контента сетка/список.
При нажатии на них блоку #ajax-box присваиваются/удаляются классы .list и .grid

<button class="grid">Grid View</button>
<button class="list">List View</button>
		  
<div id="ajax-box" class="list">
------контент----------
</div>

(function($) {
    
        $('button').on('click',function(e) {
            if ($(this).hasClass('grid')) {
                $('#ajax-box').removeClass('list').addClass('grid');
            }
            else if($(this).hasClass('list')) {
                $('#ajax-box').removeClass('grid').addClass('list');
            }
        }); 
    })(jQuery);

По умолчанию стоит класс .list, но если выбрать вид сеткой - .grid, то при переходе на след. страницу сбрасывается обратно на .list

Читал про localstorage, но так и не смог сделать чтоб сохраняло выбранный стиль у блока.
В разных примерах по разному, где то объявляют переменную, где-то не объявляют... запутался вобщем совсем. Буду рад если кто подскажет как грамотно это организовать.

Судя по описанию это что то из разряда настроек.
Вообще такие вещи делаются с использованием серверного кода, где сохраняются выбранные пользователем настройки в таблице. И при загрузке страницы делается запрос к серверу, забираются настройки, применяются на фронте.

Касательно localstorage (можно так же использовать cookie) не знаю, что там такого сложного - создавай тестовый пример, посмотрим.

Вот тестовый пример сделал.
Если переключить на сетку и обновить страницу то сбрасывает на отображение списком.
Тестовый пример на jsfiddle

Galyanov,

(function($) {
        $(function(){
            var classView = localStorage.getItem('classView');
            !!classView && $('#ajax-box').removeClass().addClass(classView);

            $('button').on('click', function(e) {
                if ($(this).hasClass('grid')) {
                    $('#ajax-box').removeClass('list').addClass('grid');
                    localStorage.setItem('classView', 'grid');
                } else if ($(this).hasClass('list')) {
                    $('#ajax-box').removeClass('grid').addClass('list');
                    localStorage.setItem('classView', 'list');
                }
            });
        })
    })(jQuery);

jQuery(function ($) {
	var ajaxBox = document.getElementById('ajax-box');

	if ( localStorage.class ) {
  		ajaxBox.className = localStorage.class;
  	}
  	
	$(':button.grid, :button.list').click(function (e) {
		localStorage.class = ajaxBox.className = e.target.className;
	});
});

Работает) Спасибо!