为什么本地存储不起作用？

Question

我正在尝试创建一个存储用户名的数组，然后打印到控制台。但是，当我刷新页面并点击提交时，上次的用户名不存在。

这是我的代码：

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

我认为代码存在一些问题，首先是具有有意义的变量名。命名变量 a、b、c、d 是自找麻烦。

在您的提交功能中，

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 语句的条件下，我会使用 "===" 而不是 "==" 来确保 javascript 在尝试找出它们是否相等时不会转换类型，尤其是在与 null 或比较时“”。

当保存到 localStorage 时，记住你只能在其中存储字符串，你可以使用 setItem(name, value);例如

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

您可以通过以下方式检索该信息：

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

如果你想存储一个对象，你需要将它转换成一个字符串，这可以使用 JSON.stringify() 来完成，所以假设你有这个用户：

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

你可以这样存储它：

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

然后您可以按如下方式检索它：

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

希望有帮助！

Answer 2

您的代码中似乎有几个错误。你的函数submint()的逻辑是，每次你点击这个函数，都会从form获取一系列数据，并将localStorage的fn项设置为document.forms["form"]["First_Name"].value的新值。

所以，现在的工作流程是，当你刷新页面时，点击submit函数，你会得到form中的数据，并且每次都覆盖localStorage.fn。您永远无法获得存储在 localStorage 中的最后一个值。

您可以尝试将您的submit() 函数分离，将存储用户名的逻辑和获取用户名的逻辑拆分为单独的功能。