根据变量创建本地存储计数器（无开关功能）

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

而不是使用

localStorage.FGAz + "v"

使用

localStorage["FGAz" + v]

v 在 "" 引号中使它成为一个不可变的字符串值。

Answer 2

首先，确保你理解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 ) 然后 THEN 会将其与字符串（undefined + "Id" - 结果为 "undefinedId"）连接起来。另一方面，将字符串附加到括号表示法 (document["getElementBy" + "Id"]) 内的访问器值将首先评估访问器的值 ("getElementBy" + "Id" - 评估为“getElementById”)，然后访问对象的属性（document["getElementById"] - returns 函数）。

根据你的例子：

localStorage.FGAz 未定义，因此 localStorage.FGAz + "v" 的计算结果为 undefined + "v"，结果为 "undefinedv"（注意 'v' 添加到 'undefined').句子 if ("undefinedv") 的计算结果总是为真（HERE 你可以找出原因）。

结论：

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

我希望它对你有意义，如果没有请在评论中给我一个问题。

Answer 3

我正在查看上面的代码，您似乎在做某种访客计数器。但是 localstorage 只适用于一个人。

如果您要进行访客统计，您可以使用 ajax 将信息发送到数据库，然后检查有多少人在线。

简单访问计数器：

JSFIDDLE LINK

来自 JSFIDDLE 的代码

<div id="visitCount"></div>

if (localStorage.visitCount){
  localStorage.visitCount = Number(localStorage.visitCount)+1;
} else {
  localStorage.visitCount = 1;
}

document.getElementById("visitCount").innerHTML = "You've been to this page "+ localStorage.visitCount + " time(s)."

根据变量创建本地存储计数器（无开关功能）

Create localstorage counter depending on variable (no switch function)

javascript

variables

counter