3
votes

Comment mettre à jour la valeur d'entrée lorsque la page se recharge à l'aide de localstorage?

Lorsqu'un utilisateur entre du texte dans l'élément d'entrée, je veux pouvoir enregistrer ce qu'il tape, de sorte que s'il actualise, il sera toujours mis en cache.

const input = document.getElementById('input')
input.onchange = function(){
  const key = input.value;
  localStorage.setItem('key', key)
  input.value = localStorage.getItem("key");
};

javascript html local-storage

1 commentaires

Êtes-vous sûr que localStorage est le compartiment le plus approprié pour conserver ces données? Si l'utilisateur revient à ce formulaire dans 6 semaines, voulez-vous que cette valeur se repeuple alors? Si la réponse est non, envisagez d'utiliser sessionStorage ou cookie, qui vous donneront une fonctionnalité d'expiration.

5 Réponses :

0
votes

Probablement quelque chose comme ça, ajoutez simplement un écouteur d'événement de chargement qui définit la valeur d'entrée de localStorage ou une valeur par défaut si rien n'est encore dans localStorage?

const input = document.getElementById('input')
input.onchange = function(){
    const value = input.value;
    localStorage.setItem('key', value);
};

document.addEventListener('load', ()=> {
    input.value = localStorage.getItem('key') || '';
})

2 commentaires

la valeur est enregistrée et mise à jour dans la console, mais ne met malheureusement jamais à jour la valeur d'entrée.

@MarkFreid avez-vous une bibliothèque qui se charge dans l'entrée après le chargement de la page?

0
votes

<body onload="reloadData()">
 <!-- your html here -->
</body>
<script>
    const input = document.getElementById('input')
    input.onchange = function(){
        const value = input.value;
        localStorage.setItem('key', value);
    };
    function reloadData() {
        input.value = localStorage.getItem('key') || ''
    }
</script>
reloadData function will be invoked when page is load.
This will work as you want.

2 commentaires

localStorage.getItem () n'accepte qu'un seul paramètre.

Désolé! confondu avec rapide.

3
votes

Attribuez simplement la valeur à l'élément d'entrée en dehors de la fonction de gestionnaire d'événements:

const input = document.getElementById('input')
input.value = localStorage.getItem("key"); // get and assign the value outside 
input.onchange = function(){
  const key = input.value;
  localStorage.setItem('key', key);
};

Remarque: Vous pouvez également envisager d'utiliser oninput em> au lieu de onchange.

0 commentaires

0
votes

En haut de votre page, ajoutez cette instruction window.onload:

window.onload = function() {
    var data = localStorage.getItem(â€œkeyâ€);
    if (data) {
        document.getElementById(â€œinputâ€).value = data;
    }
};
// Rest of your code here

0 commentaires

0
votes

Tout d'abord, enregistrez la valeur dans localstorage à chaque modification. Ensuite, lorsque la page se recharge, utilisez localStorage.getItem().

Input Something Here <input id="myinput">

var input = document.getElementById("myinput") // Get my input

function restore(){
  var lst = localStorage.getItem("inputdata") // Get your data from local storage
  
  if(lst === null || lst === undefined){
    return; // return if the user has not visited this site/input
  }
  
  input.value = lst; // Sets the value of the input to the restore data
  
  return;
}

restore()

function save(event_data){
  localStorage.setItem("inputdata",input.value) // Save the value in localStorage
}

input.addEventListener("change",save);

Cela fonctionne mais je recommande d'utiliser cookieStorage pour cela.

0 commentaires