Fatal编程技术网
  • javascript/
  • Javascript 读取本地存储数据？

Javascript 读取本地存储数据？

javascript html css

Javascript 读取本地存储数据？,javascript,html,css,Javascript,Html,Css,我正在胡乱使用一些JavaScript，我正在试图找到一种读取本地存储的方法，这样我就可以每点击10次或任何时候就获得一次成功。代码如下： <!DOCTYPE> <HTML> <HEAD> <link rel="stylesheet" type="css/text" href="css.css"> <script> function clickCounter() { if(typeof(Storage)!=="undefined")

我正在胡乱使用一些JavaScript，我正在试图找到一种读取本地存储的方法，这样我就可以每点击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>
<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>
正如您可能看到的，点击的实际脚本工作正常，所有HTML也工作正常。然而，在底部，它说函数Ach1是我试图让脚本读取数据并将其与我输入的值进行比较的地方，比如10，然后让它吐出一些包含漂亮CSS的HTML并显示成果

我拿出了你的一堆代码，试图把它清理干净

另外，我想指出的是，我把HTML5的垃圾都杀掉了，因为我看到你们只是在学习。这段代码中有一些不好的做法，但是对于您试图实现的目标，我认为/希望您可以通过采用这一信条来找出重要的方面，因为我很懒

需要注意的一些事项：

JavaScript区分大小写。因此，如果您开始调用变量clickcounter，然后尝试引用为clickcounter，您将遇到一系列错误。 我在下面提供的代码：我在HTML中混合了CSS，而在JavaScript中HTML对标记的选择很差。我看到你有一个CSS文件，嗯-是的，你没有发布它，所以我没有访问权。所以我就把它拿出来，加了很多颜色。 请记住console.log的强大功能，您的消息将显示在此处；。它是一个穷人的调试器/检修孔，可以随时检查代码正在执行的操作。在学习时使用它，以便您可以看到预期值，仅供参考：大多数浏览器都有开发工具-如果您使用的是Chrome，请点击F12-这样您可以在运行JavaScript时看到控制台消息和JavaScript中的错误。 不要害怕大量使用函数。这是一种组织代码并强迫自己学习良好实践的好方法。 代码如下：

<!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>
<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>
不确定你想要什么-没有？在你的问题中=P.然而。。。如果我猜对了某件事，我会突然想到。。。。。古怪的就是您有本地存储。单击计数=10。你不是说本地存储吗？clickcount==10？对不起；我没说清楚。我怎样才能在点击十下后显示成果？此外，我尝试了=/==的每一种变化，但都不起作用/我不知道localStorage有一个getitem方法。这是故意的吗？根据w3c规范，只有一个getItem方法。您是否在其他地方定义了小写版本？您收到的错误消息是什么？控制台显示什么？