Javascript-форум - Кнопки переключения ширины столбцов и запоминание выбора

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

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

- - Кнопки переключения ширины столбцов и запоминание выбора (https://javascript.ru/forum/jquery/68245-knopki-pereklyucheniya-shiriny-stolbcov-i-zapominanie-vybora.html)

Кнопки переключения ширины столбцов и запоминание выбора

Добрый день!!Прошу помощи или подсказки как упростить данный код и сделать так чтоб запоминалась выбранная ширина колонок, например: я нажал на кнопку "показать по 4" и кол-во столбцов стало 4 и обновив страницу я все равно увидел 4 столбца, а не два.

<script>
$(document).ready(function(){
$("#button-2").click(function(){
$("#button-2").addClass("active");
$("#button-2").removeClass("nonactive");
$("#button-4").removeClass("active");
$("#button-4").addClass("nonactive");
$("#column-block").removeClass("column-block-4");
});
});
$(document).ready(function(){
$("#button-4").click(function(){
$("#button-4").addClass("active");
$("#button-4").removeClass("nonactive");
$("#button-2").removeClass("active");
$("#button-2").addClass("nonactive");
$("#column-block").addClass("column-block-4");
});
});
</script>

<style>
.nonactive {color: #aaa;}
.active {color: #222;}
#column-block {width: auto;}
.column {display: inline-block; width: 50%;}
.column-block-4 .column {width: 25%;}
</style>


<div>
<span id="button-2" class="active">показать по 2</span>
<span id="button-4" class="nonactive">показать по 4</span> 
</div>

<div id="column-block"  class="column-block">
<div class="column">колонка 1</div>
<div class="column">колонка 2</div>   
<div class="column">колонка 3</div>
<div class="column">колонка 4</div>
</div>

EvgenyTryap,
гуглить примеры localStorage здесь на форуме и инете

Поискал, читал, попробовал, но для меня это слишком непонятно и запутанно. Если есть возможность подскажите на примере любой кнопки. Особенно мне не понятно если изменяется класс колонок только при клике, то как он может сработать без клика. Спасибо!

Цитата:

Сообщение от EvgenyTryap

то как он может сработать без клика

при загрузке: проверили значение в localStorage котором сохранено id нажатой кнопки и кликнули по этому id
во время клика сохранили id

localStorage сохранение индекса нажатой кнопки

EvgenyTryap,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
.btn {color: #aaa;  cursor: pointer;}
.btn.active {color: #222;}
#column-block { display: flex; flex-wrap: wrap;}
.column {width: 50%; border: 1px hsla(240, 100%, 50%, 1) solid; box-sizing: border-box;}
#column-block.column-block-4 .column {width: 25%;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var num = window.localStorage.getItem('btn')||0, btn = $(".btn");
btn.on("click", function() {
   if($(this).is(".active")) return;
   btn.removeClass("active");
   $(this).addClass("active");
   $("#column-block").toggleClass("column-block-4");
   var i = btn.index(this);
   window.localStorage.setItem('btn',i);
}).eq(num).click()
});
  </script>
</head>

<body>
<div>
<span class="btn active" >показать по 2</span>
<span class="btn">показать по 4</span>
</div>

<div id="column-block"  class="column-block">
<div class="column">колонка 1</div>
<div class="column">колонка 2</div>
<div class="column">колонка 3</div>
<div class="column">колонка 4</div>
</div>


</body>
</html>

Спасибо!!!!Именно это мне и нужно было! Сам бы я не смог бы это сделать никогда!