javascript - 用户 :index is undefined?

Question

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

但是，如果我尝试控制台日志entry.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();

Answer 1

问题是 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 中的类型是 用户:index，而不是用户: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
        }

这是一个 fiddle :http://jsfiddle.net/xDaevax/Lo63vftt/

免责声明:我更改了一些其他内容，以便它能够更有效地为 fiddle 工作，您可以忽略我所做的其他更改。