Démonstration interactive de localStorage

Le localStorage permet de stocker des paires clé-valeur dans le navigateur de manière persistante. Voici une interface simple pour manipuler ces données.

Interface de gestion

Code source de la démonstration

Les fonctions suivantes illustrent les méthodes essentielles de l'API Web Storage :

// Enregistrer ou mettre à jour
function saveItem() {
  const k = document.getElementById('key').value;
  const v = document.getElementById('value').value;
  if(k) {
    localStorage.setItem(k, v);
    alert('Enregistré !');
  }
}

// Récupérer une valeur par sa clé
function getItem() {
  const k = document.getElementById('key').value;
  const val = localStorage.getItem(k);
  document.getElementById('output').innerText = val ? 'Valeur : ' + val : 'Clé non trouvée';
}

// Lister tout le contenu
function listItems() {
  let html = '<ul>';
  for (let i = 0; i < localStorage.length; i++) {
    const k = localStorage.key(i);
    html += '<li>' + k + ' : ' + localStorage.getItem(k) + '</li>';
  }
  html += '</ul>';
  document.getElementById('output').innerHTML = html || 'Mémoire vide';
}

// Supprimer un élément spécifique
function removeItem() {
  const k = document.getElementById('key').value;
  localStorage.removeItem(k);
  listItems();
}

// Supprimer tout
function clearAll() {
  localStorage.clear();
  listItems();
}