Как выбрать до 3 карточек, остальные сделать неактивными, все записать в localstorage и при загрузке все выводить как было?

Сделал форк от вашего fiddle: https://jsfiddle.net/4h0cu1wo/

Мне кажется, что выделение красным стоит сделать с помощью css. Таким образом, можно выделять красным все те, кто не имеет класс .checked, но только в случае, если в родителях есть класс .limit.

Если в процессе сохранить список с массивом из трех элементов, а потом уменьшить лимит до одного, выделен будет только первый, так как загрузка фактически имитирует последовательные нажатия по карточкам.

index.js:

const limit = 3; // Какой лимит выделяемых элементов

let selected = 0; // Количество выделенных на данный момент элементов

const cards = document.getElementById('cards') // Ссылка на контейнер всех карточек
cards.addEventListener('click', ({ target }) => {
    if (target.dataset.productid) select(target) // Если нажали по карточке, пытаемся ее выделить
});

window.addEventListener('load', () => load()); // Выполняем загрузку при запуске страницы

// Выделение передаваемого элемента
function select(element) {
    // Если лимит не достигнут или мы нажимаем по выделенному элементу...
    if (selected < limit || element.classList.contains('checked')) {
        element.classList.toggle('checked') // Переключаем .checked
        selected += element.classList.contains('checked') ? 1 : -1 // Если .checked был добавлен, инкрементируем счетчик
        cards.classList.toggle('limit', selected >= limit) // Если достигли лимита, добавляем класс .limit в контейнер
        if (selected >= limit) save() // А так же, при достижении лимита сохраняем полученный список
    }
}

// Сохранение списка выделенных карточек
function save() {
    const items = []
    // Проодим по всем элементам, у которых есть класс .checked
    cards.querySelectorAll('.checked').forEach(element => items.push(element.dataset.productid));
    localStorage.setItem('checked_items', items); // Сохраняем их в LocalStorage
}

// Загрузка списка выделенных карточек
function load() {
  const items = localStorage.getItem('checked_items');
  items.split(',').forEach(id => select(cards.querySelector(`[data-productid="${id}"]`))) // Передаем на выделение карточку с указанным id в dataset
}

index.css:

div#cards {
  display: flex;
}

.product {
  display: block;
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: gray;
  border: 2px solid gray;
  cursor: pointer;
}
  
.limit {
  .product {
    border: 2px solid red;
    background-color: darkgray;

    &:not(.checked) {
      cursor: not-allowed;
    }
  }
}
 
.product.checked {
  border: 2px solid green;
  background-color: lightgray;
}

index.html:

<div id="cards">
  <div class="product slick-slide" data-productid="1">1</div>
  <div class="product slick-slide" data-productid="2">2</div>
  <div class="product slick-slide" data-productid="3">3</div>
  <div class="product slick-slide" data-productid="4">4</div>
  <div class="product slick-slide" data-productid="5">5</div>
  <div class="product slick-slide" data-productid="6">6</div>
</div>