Warum funktioniert der lokale Speicher nicht?

Question

Ich versuche, ein Array zu machen, das Benutzernamen speichert und dann auf der Konsole gedruckt wird. Wenn ich jedoch die Seite aktualisiere und auf "Senden" klicke, sind die Benutzernamen vom letzten Mal nicht vorhanden.

Hier ist mein Code:

var users = []; 
function User(first_name, last_name, username, password, email,   birthday_month, birthday, birthday_year){ 
    this.first_name = first_name; 
    this.last_name = last_name; 
    this.username = username; 
    this.password = password; 
    this.email = email; 
    this.birthday_month = birthday_month; 
    this.birhday = birthday; 
    this.birthday_year = birthday_year; 
} 
var Msg = document.getElementById("Msg"); 
function Submit(){ 
    var a = document.forms["form"]["First_Name"].value; 
    var b = document.forms["form"]["Last_Name"].value; 
    var c = document.forms["form"]["Username"].value; 
    var d = document.forms["form"]["Password"].value; 
    var l = document.forms["form"]["Email"].value; 
    var month = document.forms["form"]["birthday_month"].value; 
    var day = document.forms["form"]["birthday"].value; 
    var year = document.forms["form"]["birthday_year"].value; 
    localStorage.setItem("fn", a); 

    var ln = localStorage.b; 
    var u = localStorage.c; 
    var p = localStorage.d; 
    var e = localStorage.l; 
    var m = localStorage.month; 
    var d = localStorage.day; 
    var y = localStorage.year; 


    if (ln == null || ln == "" || u == "" || u == null || p == "" || p == null || e == null || e == "" || m == "Month" || d == "Day" || y == "Year") { 
     Msg.textContent = "Please fill out all information correctly!"; 
     return false; 
    } else { 
     var account = new User(ln, u, p, e, m, d, y); 
     var wha = localStorage.getItem("fn"); 
     users.push(wha); 
     Msg.textContent = "Registration succesful!" 
     console.log(users); 
    } 

} 

Answer 1

Ich denke, es gibt ein paar Probleme mit dem Code ist, von denen die ersten sind Variablennamen zu haben, die sinnvoll sind. Die Benennung der Variablen a, b, c, d verlangt nach Schwierigkeiten.

In Ihrer Funktion einreichen,

var ln = localStorage.b; 
var u = localStorage.c; 
var p = localStorage.d; 
var e = localStorage.l; 
var m = localStorage.month; 
var d = localStorage.day; 
var y = localStorage.year; 

Ich bin nicht sicher, was hier geschieht; Wenn Sie denken, dass dies entweder zu speichern oder von localStorage erhalten, irren Sie sich.

In Ihrer Bedingung für die if-Anweisung würde ich "===" statt "==" verwenden, um sicherzustellen, dass JavaScript die Typen nicht konvertiert, wenn sie gleich sind, insbesondere beim Vergleich mit null oder "".

Beachten Sie beim Speichern auf localStorage, dass Sie nur Zeichenfolgen darin speichern können, Sie können setItem (Name, Wert); zum Beispiel

localStorage.setItem("firstName", "James"); 

können Sie diese Informationen, indem Sie wie folgt abrufen:

var fname = localStorage.getItem("firstName"); 

Wenn Sie ein Objekt speichern möchten, müssen Sie es in eine Zeichenfolge konvertieren, die JSON gemacht werden können. stringify(), also lassen Sie uns sagen, dass Sie diesen Benutzer haben:

var firstUser = new User("fname", "lname", "uname", "pass", "email", 12, 4, 2000); 

man es so speichern kann:

localStorage.setItem("firstUser", JSON.stringify(firstUser)); 

dann können Sie es wie folgt abrufen:

var storedUser = JSON.Parse(localStorage.getItem("firstUser")); 

Hoffnung, das hilft!

Answer 2

Es scheint, dass es einige Fehler in Ihrem Code gibt. Die Logik Ihrer Funktion submint() ist, dass jedes Mal, wenn Sie diese Funktion drücken, eine Reihe von Daten von form erhalten und setzen Sie den Artikel fn von localStorage auf den neuen Wert document.forms["form"]["First_Name"].value.

So, nun der Arbeitsablauf ist, wenn Sie die Seite aktualisieren, drücken Sie die submit Funktion, werden Sie die Daten in der form erhalten, und überschreiben die localStorage.fn jedes Mal. Sie können nie den letzten Wert abrufen, den Sie in localStorage speichern.

Sie können versuchen, Ihre submit() Funktion zu trennen, teilen Sie die Logik des Speichernutzernamens und erhalten Sie Benutzername in separate Funktionen.