正在读取localStorage数据

Reading localStorage data?

本文关键字：数据 localStorage 读取      更新时间：2024-06-06

我正在摆弄一些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也是如此。然而，在底部写着"function Ach1（）"的地方，我正试图让脚本读取数据，并将其与我输入的值进行比较，例如10，然后让它吐出一些用漂亮的CSS覆盖的HTML并显示成就。

我拿出了你的一堆代码，并试图清理它。

此外，我想指出，我屠杀了HTML5的垃圾，因为我看到你只是在学习。这段代码中有一些糟糕的做法，但对于你正在努力实现的目标，我认为/希望你能把它作为教条来体现（我很懒！）。

需要注意的一些事项：

  1. JavaScript是CaSeNsInivE。因此，如果您开始调用变量"clickcounter"，然后尝试引用为"clickcounter"，您将遇到一堆错误
  2. 我提供的代码如下：我在HTML中混合了CSS，在JavaScript中混合了HTML（标记选择不当）。我看到你有一个CSS文件，是的，你没有发布它，所以我无法访问它。所以我只是把它拿出来，并在整个文件中添加颜色
  3. 记住console.log("your messages goes here");的力量。在任何时候，它都是一个可怜的调试器/检查孔来检查你的代码在做什么。在学习的同时使用它，这样你就可以看到期望的值是什么（仅供参考：大多数浏览器都有"开发工具"——如果你使用的是Chrome，那么点击F12——这样你可以看到CONSOLE消息（以及运行它时JavaScript中的错误）
  4. 不要害怕大量使用函数。这是一种很好的方法来组织代码并强迫自己学习良好的实践

这是代码：

<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>
相关文章：