сохранение данных в localstorage

Есть шесть карточек с изображениями, при наведении на каждую из которых появляется подложка, с количеством лайков, как на изображении в первой карточке. Счет нажатий идет без уменьшения при повторном нажатии (пока так). Знаю что localstorage хранит в себе только строковые значения. Вопрос заключается в том, что каким образом для каждой карточки (разом) можно добиться сохранения выведенного результата?

// let btn = document.querySelector('.like');
// let like = true,
//     likeCount = document.querySelector('.total').innerHTML;

  
// btn.addEventListener('click', () => {
//   likeCount = like ? ++likeCount : --likeCount;
//   like = !like;
//   document.querySelector('.total').innerHTML = likeCount;
// }); считывает только с одного блока и делает +1 -1 при нажатии

const btns = document.querySelectorAll('.like');
for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function (ev) {
          const direction = ev.target.classList.contains('up') ? true : false;
          const count = ev.target.parentElement.parentElement.querySelector('.total');
          let counting = count.innerHTML;
          counting = parseInt(counting) + (direction ? 1 : +1); // бесконечное количество лайков, без возможности забрать их
          count.innerHTML = counting;
      })
};

localStorage.setItem('key', btns);
console.log(localStorage.getItem('key', JSON.stringify(btns)));

count находится вне глобальной зоны видимости, в связи с чем через него не получается, либо я что-то сильно путаю, и не до конца разобрался в данной теме. Прошу не судить строго :3

Код карточек

            <div class="list_item">
              <img src="./assets/img/salut.png" alt="salut" />
              <div class="overlay_list">
                <div class="overlay_title_list">
                  <h6>SHIBUYA</h6>
                </div>
                <div class="like_list">
                  <div class="like"></div>
                  <div class="total">57</div>
                </div>
              </div>
              <div class="list_text">
                <p>
                  Jump off balcony, onto stranger's head. Chase ball of string
                  hide when guests come over. Being gorgeous with belly side up
                  i could pee on this.
                </p>
              </div>
              <div class="button_list">
                <p class="see_more">SEE MORE</p>
              </div>
            </div>