So speichern Sie Daten aus einem Formular mit HTML5 Local Storage?

Question

Ich habe ein Formular, das Logging in eine Website macht, aber nicht in meiner und ich möchte, dass sie in meinem Web mit HTML5 lokalen Speicher Daten gespeichert werden. Aber nicht wie. Irgendeine Idee? Mein Formular ist das:

<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> 

Answer 1

LocalStorage hat eine SetItem-Methode. Sie können es wie folgt verwenden:

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

Wenn Sie den Wert erhalten möchten, können Sie wie folgt vorgehen:

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

Es ist auch möglich, die Werte auf Tastenklick zu speichern, etwa so:

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

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

Answer 2

können Sie openDB verwenden für die lokale Speicherung Manipulation

, in denen c Sie oder ein Set-Daten auf diese Weise erhalten -

db.local.set("key", "value"); // set 
db.local.get("key"); // get 

Answer 3

Hier ist eine schnelle Funktion, die den Wert eines <input>, <textarea> etc im lokalen Speicher gespeichert werden, und es wieder auf Seite laden.

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); 
    }); 
} 

Ihr Eingangselement muss ein id haben festgelegt, dass bei allen Verwendungen dieser Funktion eindeutig ist. Es ist diese id, die den Wert im lokalen Speicher identifiziert.

Beachten Sie, dass diese Methode einen Ereignishandler hinzufügt, der nie entfernt wird. In den meisten Fällen wird das kein Problem sein, aber Sie sollten überlegen, ob es in Ihrem Szenario wäre.