我正在处理一些 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)进行比较，然后将其吐出一些 HTML 覆盖在漂亮的 CSS 中并显示成就。
最佳答案
我取出了一堆你的代码并试图清理它。
此外，我想指出，我对 HTML5 进行了废话处理，因为我看到您只是在学习。这段代码中有一些不好的做法，但对于你想要完成的事情，我认为/希望你可以通过采用它作为教条(我懒惰了!)来闪现导入位。
注意事项:
- JavaScript 是 CaSeSeNsItIvE。因此，如果您开始调用变量“clickcounter”，然后尝试引用为“clickCounter”，您将遇到一堆错误。
- 我在下面提供的代码:我在 HTML 中混合了 CSS，在 JavaScript 中混合了 HTML(标签选择不当)。我看到你有一个 CSS 文件，好吧 - 是的，你没有发布它所以我无法访问它。所以我只是把它拿出来并在整个过程中添加了颜色。
- 记住
console.log("your messages goes here");的力量。这是一个可怜的调试器/检修孔，可以随时了解您的代码正在做什么。在你学习的时候使用它，这样你就可以看到预期值是什么(仅供引用:大多数浏览器都有“开发者工具”——如果你使用的是 Chrome，然后点击F12——这样你就可以看到控制台消息(以及运行时 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>
关于javascript - 读取 localStorage 数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20508277/