用户：索引未定义？答案

【问题标题】：User:index is undefined?用户：索引未定义？
【发布时间】：2014-11-23 20:21:32
【问题描述】：

我已经使用用户名登录创建了一个 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();

【问题讨论】：

您能向我们展示 HTML 并告诉我们您点击/输入的内容吗？也许做一个小提琴
在您在 init 方法中分配值之前，索引似乎也是从本地存储中读取的字段。如果已分配一个值，您是否尝试过仅读取该值？因此，您的 init 将第一次设置 index = 1 。为什么要读取可能未定义的值并将其加 1？
@LoganMurphy JSFiddle
@xDaevax 不太清楚你的意思是什么我应该在 init 方法之后为索引赋值......或者你能举个例子吗？
经过进一步调查，您的循环似乎是问题的一部分。您的索引始终为 n+1（由于 User:index 本地存储条目），但在您的循环中，您没有考虑到这一事实。给定本地存储中的 3 个元素 + User:index，您的 for 循环中的迭代器限制将为 4，在最后一个索引上给出 undefined，因为 localStorage[4] 是 User:index 而不是用户条目，因此 JSON 解析会失败并给你未定义的。

标签： javascript json html local-storage

【解决方案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 中的类型是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/

免责声明：为了让小提琴更有效地工作，我更改了一些其他内容，您可以忽略我所做的其他更改。

【讨论】：

投反对票的人是否愿意解释原因以便我改进答案？
本地存储中的键顺序可能不一定映射到循环的i 变量，因此您可能永远无法通过if 中的布尔测试。
因为键是字母 1, 10, 11, 2, 3, 4, 5...但是 i 是数字 1, 2, 3, 4, 5
可能还有一些中间键
我明白你的意思。然而，就字母顺序而言，我所有的调试都显示这些项目是按照它们添加的顺序存储的（所以数字很好），但是如果一个项目存储在用户元素之间，那将是一个问题。这就是我因为懒惰和跳过正则表达式密钥检查而得到的。我会尽快修改我的答案。

【解决方案2】：

你说得对，是 User:index 导致了这个问题。您可以使用以下代码修复它。

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 库。

【讨论】：