Question

我正在搞乱一些JavaScript，我试图想办法以某种方式阅读localStorage，这样我每10次点击或任何时候都可以获得成就。这是代码：

<!DOCTYPE>
<HTML>
<HEAD>
<link rel="stylesheet" type="css/text" href="css.css">
<script>
function clickCounter() {
if(typeof(Storage)!=="undefined")
  {
  var ten=10;
  var value = clickCount;
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " +                   
localStorage.clickcount + " times.";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web   
storage...";
}
}
function clickCounterReset() {
localStorage.clear();
localStorage.clickcount=0;
document.getElementById("result").innerHTML="You haven't clicked the button once!";
}
function Ach1() {
if (localStorage.clickcount=10) {
localStorage.setitem("GetData" , value);
alert(localStorage.getitem("GetData"));
document.getElementById("Ach1").innerHTML="Successfully reached 100!";
}
}
</script>
</HEAD>
<BODY class="body">
<br>
<br>
<div id="Ach1"></div>
<br>
<br>
<center>
<div class="noLight">
<div class="pointlessbutton" style="cursor: pointer;" onClick="clickCounter()">
<font color="white" size="4">+1</font>
</div>
<br>
<div class="pointlessbutton" style="cursor: pointer;" onClick="clickCounterReset()">
<font color="white" size="4">Reset</font>
</div>
</div>
<div id="result"></div>
</center>
</BODY>
</HTML>

正如您所看到的，点击的实际脚本运行正常，所有HTML也是如此。然而，在底部，它说“功能Ach1（）”是我试图让脚本读取数据并将其与我放入的值（例如10）进行比较然后让它吐出来的地方一些HTML覆盖在漂亮的CSS中并显示成就。

Answer 1

我拿出了你的代码BUNCH并尝试清理它。

另外，我想指出的是，我看到了HTML5的废话，因为我看到你只是在学习。在这段代码中有一些BAD实践，但是对于你想要实现的目标，我认为/希望你可以通过将其作为教条（我懒得！）来解决导入问题。

有些事情需要注意：

JavaScript是CaSeSeNsItIvE。因此，如果您开始调用变量“clickcounter”然后尝试引用“clickCounter”，那么您将遇到一堆错误。
我在下面提供的代码：我在HTML中混合了CSS，在JavaScript中混合了HTML（标签选择不当）。我看到你有一个CSS文件，好吧 - 是的，你没有发布它所以我没有访问它。所以我把它拿出来并添加了颜色。
记住console.log("your messages goes here");的力量。对于你的代码在任何时候做的事情来说，这是一个糟糕的调试器/沙井。在学习的过程中使用它，这样你就可以看到预期值是什么（仅供参考：大多数浏览器都有“开发者工具” - 如果你使用的是Chrome，那么点击F12 - 这样你就可以看到CONSOLE消息了（运行时JavaScript中的错误。）
不要害怕大量使用功能。这是组织代码并强迫自己选择良好实践的好方法。

以下是代码：

<HTML>
<HEAD>
<script>
    function clickCounter() {
        if(typeof(Storage)!=="undefined"){
            if (localStorage.clickCount){
                localStorage.clickCount=Number(localStorage.clickCount)+1;
                updateResults();
                console.log("Added +1 to Click Count!  New value: " + localStorage.clickCount);
                goldStarNotification();
            }
            else{
                clickCounterReset(); // Set the click-counter to 0
                updateResults();
            }
        }
    }

    function updateResults(){
        var myCounter = localStorage.clickCount;
        document.getElementById("result").innerHTML = "You have clicked the button " + myCounter + " time(s).";
    }

    function clickCounterReset(){
        console.log("The reset was hit!");
        localStorage.clickCount=0;
        updateResults();
    }

    function goldStarNotification(){
        if (localStorage.clickCount == 10){
            console.log("You WIN!!! ZOMG!");
            document.getElementById("starNotification").innerHTML = "<center><h1>Successfully reached Level 10!</h1></center>";
        }
    }
</script>
</HEAD>
<BODY class="body" bgcolor="black", onLoad="clickCounterReset()">
<br>
<br>
<div id="starNotification" style="color: white;"></div>
<br>
<br>
<center>
<div class="noLight">
<div class="pointlessbutton" style="cursor: pointer;" onClick="clickCounter()">
<font color="white" size="4">+1</font>
</div>
<br>
<div class="pointlessbutton" style="cursor: pointer;" onClick="clickCounterReset()">
<font color="white" size="4">Reset</font>
</div>
</div>
<div id="result" style="color: white;">Hey!  Update me!  :-)</div>
</center>
</BODY>
</HTML>

读取localStorage数据？

1 个答案: