Меняем в Bootstrap класс у кнопки при нажатии

Следующий код меняет класс кнопки (фреймворк Bootstrap).

Код:

$(function(){
$('#btn1,#btn2').click(function(){
if ($(this).attr('id')=='btn1') {
$(this).addClass('btn-danger').removeClass('btn-default');
$('#btn2').removeClass('btn-danger').addClass('btn-default');
}
else {
$(this).addClass('btn-danger').removeClass('btn-default');
$('#btn1').removeClass('btn-danger').addClass('btn-default');
}
//сохраняем состояние кнопок в localStorage
localStorage.setItem('btn1',$('#btn1').attr('class'));
localStorage.setItem('btn2',$('#btn2').attr('class'));
});
//извлекаем сохранённые данные и применяем их к кнопкам
if (localStorage.getItem('btn1')) {
$('#btn1').attr('class',localStorage.getItem('btn1'));
}
if (localStorage.getItem('btn2')) {
$('#btn2').attr('class',localStorage.getItem('btn2'));
}});

Вариант Bootstrap 5: две кнопки type=“button” с id=“btn1” и id=“btn2”, каждая с классами btn btn-secondary. Скрипт подключите после них.

const buttons = ['btn1', 'btn2'].map(id => document.getElementById(id));
function applyChoice(id) {
  buttons.forEach(button => {
    const active = button.id === id;
    button.classList.toggle('btn-danger', active);
    button.classList.toggle('btn-secondary', !active);
    button.setAttribute('aria-pressed', String(active));
  });
}
buttons.forEach(button => button.addEventListener('click', () => {
  applyChoice(button.id);
  try { localStorage.setItem('button-choice', button.id); } catch { /* Выбор работает без сохранения. */ }
}));
let saved = null;
try { saved = localStorage.getItem('button-choice'); } catch { /* Хранилище недоступно. */ }
applyChoice(['btn1', 'btn2'].includes(saved) ? saved : null);

Сохраняется только один из двух разрешённых ID. Данные относятся к origin страницы; HTTP и HTTPS имеют отдельные хранилища.