Actualisation

Bonjour à tous,
Débutante en Javascript j'ai un petit soucis assez embêtant.

Dans le cadre de ma formation, je dois créer un projet personnel. J'ai donc choisi de créer un gestionnaire de collection de manga, film, animé ...

Devant intégrer du Javascript, j'ai décidé de faire la liste des différents tomes de manga avec cette techo.
Il créé la liste de tous les tomes et au clique le tome passe dans la liste de possession.
Ceci marche correctement mais lorsque j'actualise ma page, la liste s'efface.

Y a t'il un moyen de "sauvegarder" celle ci?

const addInput = document.querySelector('#addinput');
const addButton = document.querySelector('#addbutton');
const mangaList = document.querySelector('.mangaList');
const possededManga = document.querySelector('.possededManga');
 
// Evenement pour ajouter un tome
addButton.addEventListener('click',  addManga);
 
// Fonction pour ajouter un tome
function addManga(){
 
  if(addInput.value === ''){
 
    alert('Attention le champ est vide')
 
  }else{
     
    const li = document.createElement('li');
    const checkbox = document.createElement('input');
    const label = document.createElement('label');
    const editInput = document.createElement('input');
 
    checkbox.type = 'checkbox';
    editInput.type = 'text';
    label.innerText = addInput.value;

    localStorage
 
    li.appendChild(checkbox);
    li.appendChild(label);
 
    mangaList.appendChild(li);
 
    // nettoyer le champ input 
    addInput.value = '';
 
    checkbox.addEventListener('click', posseded);
 
  }
 
}

// Fonction pour dire que l'on possède le tome
function posseded(e){
 
  const manga = e.target;
  const li = manga.parentNode;
  console.log(li);
 
  if(manga.getAttribute('checked')){
 
    mangaList.appendChild(li);
    manga.removeChild('checked');
 
  }else{
    possededManga.appendChild(li);
    manga.setAttribute('checked', 'checked');
  }
 
}

Salut

Je vous conseille d'utiliser indexedDB.

Un peu de lecture sur mdn :

a écrit :
IndexedDB est un moyen pour permettre le stockage de données dans le navigateur d'un utilisateur, de manière persistante

IndexedDB

Les concepts basiques d'IndexedDB

Utiliser IndexedDB