Как занести данные в localstorage?

Есть календарь событий, где мы при нажатии меняем цвет нужной даты. При перезагрузке страницы всё сбрасывается. Попробовал добавить в localstorage, но не работает.

Календарь

<div id="calendar"></div>

Стиль

.block-bron-zala{
    background: radial-gradient(80% 41% at 50% 40%, rgba(224, 145, 131, 0.603) 40%, rgba(235, 199, 84, 0) 100%), #161616;
    color: white;
    text-size-adjust: 36;
}

.Accessories-name2{
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
    color: white;
    font-size: 36px;
}

#calendar {
  display: grid;
  grid-template-columns: repeat(7, auto);
width: 100%;
height: 100%;
padding-right: 200px;
padding-left: 200px;
margin-bottom: 100px;
}

.block {
  height: 3.125em;
  margin: .125em;
  display: grid;
  background-color: rgb(122, 170, 98);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.name, .block {
  text-align: center;
}

.name {
  font-weight: 700;
}

.empty {
  background-color: rgb(247, 247, 247);
}

.active {
  background-color: rgb(189, 69, 62);
}

И сам скрипт закидывания в localstorage вместе с настройками календаря

let $calendar = document.querySelector('#calendar')
let days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

days.forEach(e => {
  let day = document.createElement('div')

  day.textContent = e[0]
  day.className = 'name'
  $calendar.appendChild(day)
})
for (let i = 1; i < 35; i++) {
  let day = document.createElement('button')
  let dayNum = i - 3
  let isEmpty = dayNum < 1
  day.className = 'block' + (isEmpty ? ' empty' : '')
  day.textContent = isEmpty ? '' : dayNum
  $calendar.appendChild(day)
}
$calendar.addEventListener('click', e => {
  if(e.target.matches('[class="block"]')) {
    e.target.classList.add('active')
  }
})





calendar.value = localStorage.getItem('calendar');
calendar.onchange = () => {
  localStorage.setItem('calendar', calendar.value)
};

console.log(calendar);