Why won't local storage work?

Question

I am trying to make an array that stores usernames and then is printed to the console. However, when I refresh the page and hit submit, the usernames from last time aren't there.

Here is my 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

I think there are a a few problems with the code, the first of which is to have variable names that are meaningful. Naming variables a, b, c, d is asking for trouble.

In your submit function,

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;

I am not sure what is happening here; if you think this is either saving to or getting from localStorage, you are mistaken.

In your condition for the if statement, I would use "===" instead "==" to make sure javascript doesn't convert the types in trying to find out if they are equal, especially when comparing to null or "".

When saving to localStorage, keep in mind that you can only store strings in there, you can use setItem(name, value); for example

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

you can retrieve that information by doing as follow:

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

If you want to store an object, you need to convert it to a string, which can be done using JSON.stringify(), so let's say you have this user:

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

you can store it like that:

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

then you can retrieve it as follow:

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

Hope that helps!

Answer 2

It seems there are several mistakes in your code. The logic of your function submint() is that, every time you hit this function, will get series of data from the form, and set the item fn of localStorage to the new value of document.forms["form"]["First_Name"].value.

So, the work flow now is, when you refresh the page, hit the submit function, you will get the data in the form, and overwrite the localStorage.fn every time. You can never get the last value you store in localStorage.

You can try to separate your submit() function, split the logic of store username and get username into separately functionalities.