Je suis sur le point de coder, en Javascript, du code (impliquant une boucle sur chaque <input> et l'ajout d'écouteurs):

  • permettant, après pression sur une touche, d'enregistrer toutes les <input> valeurs dans localStorage
  • restaurer toutes les <input> valeurs de localStorage dans le cas où la page / le navigateur a été fermé et rouvert sur la même page

Mais peut-être existe-t-il un moyen automatique, fourni par les navigateurs?

Par exemple. en ajoutant un attribut à <input>, similaire à <input autofocus> (qui n'est pas lié ici)

Question: existe-t-il une fonction d'enregistrement automatique des <form> <input> balises HTML?

1
Basj 7 avril 2020 à 19:48

3 réponses

Meilleure réponse

Pour autant que je sache, il n'y a aucun moyen intégré de le faire, vous devez le faire manuellement;

function persist(thisArg) {
  localStorage.setItem(thisArg.id, thisArg.value);
}
<input id="test" onchange="persist(this)" />

Persister et récupérer tous ensemble:

function persist(event) {
  let thisArg = event.path[0];
  localStorage.setItem(thisArg.id, thisArg.value);
}

// you may use a more specific selector;
document.querySelectorAll("input").forEach((inputEl) => {
  inputEl.value = localStorage.getItem(inputEl.id);
  inputEl.addEventListener("change", persist);
});
<input id="test" />
1
Leonardo 7 avril 2020 à 18:16

Sur la base de la réponse acceptée, voici un one-liner qui peut être utile:

document.querySelectorAll('input:not([type="submit"])').forEach(elt => { elt.value = localStorage.getItem(elt.name); elt.addEventListener("change", e => { localStorage.setItem(e.path[0].name, e.path[0].value); }); });

Il sérialise / désérialise les <input> en localStorage, indexés par leurs attributs name.

1
Basj 7 avril 2020 à 18:34

Il n'y a aucun moyen automatique de le faire. vous avez deux options:

  1. enregistrer les données par code
    exemple:
localStorage.setItem('testObject', JSON.stringify(yourObject)); // for storing data
JSON.parse(localStorage.getItem('yourObject')); // for retrieving data


extrait de code:

// for saving data

function saveData(el) {
  localStorage.setItem(el.id, JSON.stringify(el.value));
}

// for retrieving data on page load

function getData() {
  var inp = document.getElementById("inp");
  inp.value = JSON.parse(localStorage.getItem('inp')) || "";
}
<body onload="getData()">
    <input id="inp" onchange="saveData(this)" />
</body>
  1. essayez une bibliothèque d'aide comme persisto
1
Raji Hawa 7 avril 2020 à 17:49