用户:索引未定义

User:index is undefined?

本文关键字:未定义 索引 用户      更新时间:2023-09-26

我使用user_name登录创建了一个localStorage,并将JSON数据(条目)的字符串解析为一个普通对象。

但如果我尝试控制台日志条目.username,我会得到我存储的用户,但也会得到一个"未定义"?

我怀疑是我的User:index代码扰乱了entry.User_name?

var User = {
    index: window.localStorage.getItem("User:index"),
    $form: document.getElementById("userReg"),

    $button_register: document.getElementById("registerUser"),
    $button_login: document.getElementById("logIN"),
    init: function() {
        // initialize storage index
        if (!User.index) {
            window.localStorage.setItem("User:index", User.index = 1);
        }
        User.$form.addEventListener("submit", function(event) {
            var entry = {
                id: parseInt(this.id_entry.value),
                user_name: this.user_name.value,
            };
            if (entry.id == 0) {
                User.storeAdd(entry);
            }
        }, true);

        User.$button_login.addEventListener("click", function(entry) {
            for (var i = 0, len = localStorage.length; i < len; ++i) {
                var key = localStorage.key(i);
                var value = localStorage[key];
                entry = JSON.parse(window.localStorage.getItem(key));
                console.log(entry.user_name);
            }
            if (document.getElementById("firstName").value == entry.user_name) {
                alert("You have logged in");
            } else {
                document.getElementById("negative").innerHTML = "Username does not match"
            }

        }, true);

    },
    storeAdd: function(entry) {
        entry.id = User.index;
        window.localStorage.setItem("User:index", ++User.index);
        window.localStorage.setItem("User:" + entry.id, JSON.stringify(entry));
    },

};

User.init();

问题在于localStorage中的数据。您的登录功能假定存储在localStorage中的所有条目都是您的User条目类型。但是当你开始存储其他东西时,你没有检查来确认类型是你想要的。

此处:

        for (var i = 0, len = localStorage.length; i < len; ++i) {
            var key = localStorage.key(i);
            var value = localStorage[key];
            entry = JSON.parse(window.localStorage.getItem(key));
            console.log(entry.user_name);
        }

实际失败的行是:entry = JSON.parse(window.localStorage.getItem(key));,因为在循环结束时,localStorage中的类型是User:index,而不是User:3

如果你计划在localStorage中有更多的东西,你应该在循环中添加一个检查,比如:

        for (var i = 0; i < localStorage.length; ++i) {
            var key = localStorage.key(i);
            var reg = new RegExp("User':''d+$");
            //Only process user entries
            if(reg.test(key)) {
                var value = localStorage[key];
                entry = JSON.parse(window.localStorage.getItem(key));
                console.log(entry.user_name);
                console.log(entry);
            } // end if
        }

这是一把小提琴:http://jsfiddle.net/xDaevax/Lo63vftt/

免责声明:我将其他一些东西更改为,以便它能更有效地为小提琴工作,你可以忽略我所做的其他更改。

你说得对,是User:索引导致了这个问题。您可以使用以下代码进行修复。

for(var i = 1; i < User.index; i++) {
    var key = "User:" + i;
    var entry = JSON.parse(localStorage[key]);
    console.log("entry : ", key, entry);
    ...

http://jsfiddle.net/yv04x4mw/6/

我也建议不要用这种方式创建帐户(除非你有充分的理由),也可以使用像jQuery这样的JavaScript库。