Przechowywanie Div'a z dodaną klasą w local storage

Dzień dobry,
mam pewien problem, nie mogę poradzić sobie z dodaniem klasy do local storage. Wylosowane div'y przechowują się w pamięci, jednak chciałbym po dwukrotnym kliknięciu zmienić ich kolor na zielony, to się udaję, jednak po odświeżeniu przyjmują domyślną klasę.

const losuj = document.querySelector('#losuj')
const listContainer= document.querySelector('#list-container')

const list = [
  {id: 1, name: 'A'},
  {id: 2, name: 'B'},
  {id: 3, name: 'C'},
  {id: 4, name: 'D'},
  {id: 5, name: 'E'},
  {id: 6, name: 'F'},
  {id: 7, name: 'G'},
  {id: 8, name: 'H'},
  {id: 9, name: 'I'},
  {id: 10, name: 'J'},
  {id: 11, name: 'K'},
  {id: 12, name: 'L'},
];
losuj.addEventListener('click',()=>{
  listContainer.innerHTML=``;
  getList()
})
const lists = JSON.parse(localStorage.getItem('list'))
if(lists){
    lists.forEach(list=>applyList(list))
}


function randomList(elements, amount) {
  const result = [];
  for (let i = 0; i < amount; i++) {
    const [element] = elements.splice(Math.floor(Math.random() * elements.length), 1);
    result.push(element)
  }
  localStorage.setItem('list', JSON.stringify(result))
  return result;
}

function getList(){
  randomList(list,6).forEach((item) =>{
    applyList(item)
    })   
}

function applyList(list){
  const listDiv = document.createElement('div')
  listDiv.classList.add('listDiv')
  listDiv.innerHTML=`
  <span id="id">${list.id}</span>
  <span id="name">${list.name}</span>
`
  listContainer.appendChild(listDiv)
  listDiv.addEventListener('dblclick', () => {
    listDiv.classList.toggle('done')

})
}