javascript - 根据变量创建本地存储计数器(无开关功能)

Question

我刚刚开始学习 JavaScript，我正在尝试简化一些代码，但无法找到可行的解决方案。工作部分是这样的:

switch (v) {

            case 0:
            if (localStorage.FGAz0) {
            localStorage.FGAz0 = Number(localStorage.FGAz0)+1;
            } else {
            localStorage.FGAz0 = 1;
            }
            document.getElementById("Ergebnis").innerHTML = "You have " + localStorage.FGAz0+ " Visitor(s).";
            break;  
            case 1:
            if (localStorage.FGAz1) {
            localStorage.FGAz1 = Number(localStorage.FGAz1)+1;
            } else {
            localStorage.FGAz1 = 1;
            }
            document.getElementById("Ergebnis").innerHTML = "You have " + localStorage.FGAz1+ " Visitor(s).";
            break;  
            case 2:
            if (localStorage.FGAz2) {
            localStorage.FGAz2 = Number(localStorage.FGAz2)+1;
            } else {
            localStorage.FGAz2 = 1;
            }
            document.getElementById("Ergebnis").innerHTML = "You have " + localStorage.FGAz2+ " Visitor(s).";   
            break;
            case 3:
            if (localStorage.FGAz3) {
            localStorage.FGAz3 = Number(localStorage.FGAz3)+1;
            } else {
            localStorage.FGAz3 = 1;
            }
            document.getElementById("Ergebnis").innerHTML = "You have " + localStorage.FGAz3+ " Visitor(s).";   
            break;
            case 4:
            if (localStorage.FGAz4) {
            localStorage.FGAz4 = Number(localStorage.FGAz4)+1;
            } else {
            localStorage.FGAz4 = 1;
            }
            document.getElementById("Ergebnis").innerHTML = "You have " + localStorage.FGAz4+ " Visitor(s).";
            break;
            case 5:
            if (localStorage.FGAz5) {
            localStorage.FGAz5 = Number(localStorage.FGAz5)+1;
            } else {
            localStorage.FGAz5 = 1;
            }
            document.getElementById("Ergebnis").innerHTML = "You have " + localStorage.FGAz5+ " Visitor(s).";
            break;
            default: 
            if (localStorage.FahrGastAnzahl) {
            localStorage.FahrGastAnzahl = Number(localStorage.FahrGastAnzahl)+1;
            } else {
            localStorage.FahrGastAnzahl= 1;
            }
            document.getElementById("Ergebnis").innerHTML = "You have " + localStorage.FahrGastAnzahl+ " Visitor(s).";}


    } else {
        document.getElementById("Ergebnis").innerHTML = "Sorry, dein Browser unterstützt die Speicherung von lokalen Daten nicht...";
    }

我试图根据只有数字的“v”将它短路到var。目前我有这个:

if (localStorage.FGAz + "v") {
            (localStorage.FGAz + "v") = Number(localStorage.FGAz + "v")+1; 
        } else {
            (localStorage.FGAz + "v") = 1;
        document.getElementById("Ergebnis").innerHTML = "You have " + (localStorage.FGAz + "v") + " Visitor(s).";}

添加变量“v”有些不对劲，但我不知道是什么，也没有在搜索中找到解决方案。希望可以有人帮帮我。请不要使用jquery，我还没学过。

Answer 1

首先，请确保您了解 v 和 "v" 之间的区别:

• v 是一个变量名，可以容纳任何值(字符串、数字等)，例如:v = 1; v =“1”； v = "xxx";
• "v"(注意括号)本身就是一个字符串值(v = "v"，其中 v 是变量名称"v" 是变量值)。括号内的所有内容(" 或 ')都是字符串。

如果您希望将数字(本例中为整数)值转换为字符串，您可以使用 v.toString() 或简单地将空字符串附加到值 v +“”。

其次，请了解一下Property Accessors .

简而言之:您可以通过两种不同的方式访问对象的属性:使用点表示法 (localStorage.FGAz1) 或方括号表示法 (localStorage["FGAz1"] )。

将字符串值附加到点表示的属性访问器 (document.getElementBy + "Id") 将首先评估属性的值 (document.getElementBy - 其评估结果为 undefined)，然后将其与字符串 (undefined + "Id" - 生成 "undefinedId") 连接起来。另一方面，将字符串附加到括号表示法内的访问器值 (document["getElementBy"+ "Id"]) 将首先评估访问器的值 ("getElementBy"+ "Id" - 计算结果为“getElementById”)，然后访问对象的属性(document["getElementById"] - 返回函数)。

根据您的示例:

localStorage.FGAz 未定义，因此 localStorage.FGAz + "v" 计算结果为 undefined + "v" ，结果为“undefinedv”(注意“v”添加到“undefined”末尾)。句子 if ("undefinedv") 的计算结果始终为 true(HERE 您可以找出原因)。

结论:

使用括号表示法: if (localStorage['FGAz' + v.toString()]) {。对于 v = 1，其计算结果为 if (localStorage['FGAz1']) {；对于 v = XXX，其计算结果为 if (localStorage['FGAzXXX']) { 等等.

我希望这对您有意义，如果没有的话请在评论中给我留言。