Как сделать сохранение на странице через localStr?

Question

[licvis]

Есть страница, на которой будут разные классы. Хочу реализовать это так, что не будет перехода по страницам.
JS в зависимости от кнопки будет скрывать все классы, кроме нажатого. Как правильно это записывать в JS чтобы это еще и сохранялось в localStrage ?

Выглядеть должно так ( Юзер нажал на "Landing" -> обновил страницу -> его выбор на "landing" сохранился

Опыта мало, поэтому надеюсь на снисходительность) Возможно, это неправильное решение в данном случае, но тем не менее :З

<div class="cate_k_block">

                    <div class="cate_k">
            
                        <div class="color">
                            <div class="il-ul-menu">
                        <div class="dropdown-menu all-cate">
                            <button class="showAll">All categories <span class="quantity_all">375</span></button>
                            </div>

                        <div class="dropdown-menu">
                            <button>Web<span class="quantity_all">375</span></button>
                            <div class="options">
                                <ul class="menu">
                                    <div id="stroke-menu" class="showWeb-size">Web-site</div>
                                    <div id="stroke-menu" class="showLanding">Landing-page</div>
                                    <div id="stroke-menu" class="showApplications">Applications</div>
                                        </li>    
                        </div>
                        </div>
</div>
                        </div>



                <div class="infograph product website">Web-site</div>

                <div class="infograph product landing-page">Landing</div>


                <div class="infograph product applications">Applications</div>

// listeners
    document.querySelector('.showWeb-size').addEventListener('click', () => filter('website'));
    document.querySelector('.showLanding').addEventListener('click', () => filter('landing-page'));
    document.querySelector('.showApplications').addEventListener('click', () => filter('applications'));
    document.querySelector('.showAll').addEventListener('click', () => filter('all'));

    // filtering
    const filter = category => {
        const items = document.querySelectorAll('.product');

        items.forEach(item => {
            item.style.display = category === 'all' || item.classList.contains(category) ? 'block' : 'none';
        });

        history.pushState({}, '', `/category/${category}`);
    };

Comments

[Александр]

Модератор Повтор вопроса и акк новый.

[Александр]

Кстати, переделанный код супер.

All categories (кол-во 375)
- Web-site
- Landing-page
- Applications