web-dev-qa-db-fra.com

Comment enregistrer des données à partir d'un formulaire avec HTML5 Local Storage?

J'ai un formulaire qui permet de se connecter à un site Web mais pas au mien et je souhaite que les données de formulaire soient sauvegardées sur mon site Web avec le stockage local HTML5. Mais pas comment. Une idée? Ma forme est la suivante:

<form action="http://issuefy.ca.vu/on/login.php" class="form-login"  method="post" /> 
<input name="email" type="email" id="email" required="" placeholder="Email" />
<input name="password" type="password" required="" placeholder="Contraseña" />
</form>
javascripthtml5formslocal-storage
11
Jaumesv

LocalStorage a une méthode setItem. Vous pouvez l'utiliser comme ceci:

var inputEmail= document.getElementById("email");
localStorage.setItem("email", inputEmail.value);

Lorsque vous souhaitez obtenir la valeur, vous pouvez effectuer les opérations suivantes:

var storedValue = localStorage.getItem("email");

Il est également possible de stocker les valeurs sur un clic de bouton, comme suit:

<button onclick="store()" type="button">StoreEmail</button>

<script  type="text/javascript">
  function store(){
     var inputEmail= document.getElementById("email");
     localStorage.setItem("email", inputEmail.value);
    }
</script>
36
CocLn

Voici une fonction rapide qui stockera la valeur d'un <input>, <textarea> etc dans le stockage local et la restaurera au chargement de la page.

function persistInput(input)
{
  var key = "input-" + input.id;

  var storedValue = localStorage.getItem(key);

  if (storedValue)
      input.value = storedValue;

  input.addEventListener('input', function ()
  {
      localStorage.setItem(key, input.value);
  });
}

Votre élément d'entrée doit avoir une variable id unique parmi toutes les utilisations de cette fonction. C'est cette id qui identifie la valeur dans le stockage local.

var inputElement = document.getElementById("name");

persistInput(inputElement);

Notez que cette méthode ajoute un gestionnaire d'événements qui n'est jamais supprimé. Dans la plupart des cas, cela ne posera pas de problème, mais vous devez déterminer si cela convient à votre scénario.

1
Drew Noakes

Ici, la solution simple avec JQUERY est comme ça.

var username = $('#username').val();
var password = $('#password').val();
localStorage.setItem("username", username);
localStorage.setItem("password", password);
0
Kishan Patel

Pour enregistrer les données, vous devez utiliser la méthode LocalStorage.setItem et pour obtenir les données, vous devez utiliser la méthode LocalStorage.getItem.

0
Shahala Danish