Html Javascript游戏保存变量
我的目标是每次单击正确的框时保存我的分数，如果我单击错误的框，分数将重置为0，并弹出一条警告消息说你输了。。我的问题是，即使页面被刷新，我如何将值保存到javascript中的变量？ 我已经标记了变量第一次声明、更改和保存的重要位置Html Javascript游戏保存变量,html,variables,session-storage,Html,Variables,Session Storage,我的目标是每次单击正确的框时保存我的分数，如果我单击错误的框，分数将重置为0，并弹出一条警告消息说你输了。。我的问题是，即使页面被刷新，我如何将值保存到javascript中的变量？ 我已经标记了变量第一次声明、更改和保存的重要位置 <!DOCTYPE html> <html lang="en"> <style> .normalTableSize { margin-left: auto;
<!DOCTYPE html>
<html lang="en">
<style>
.normalTableSize {
margin-left: auto;
margin-right: auto;
margin-bottom: 3%;
}
.navigationbarFont {
font-size: xx-large;
font-weight: bold;
}
.squareBorders {
border: 2px solid black;
width: 33%;
padding:40px;
}
.buttons {
border: 2px solid black;
width: 100%;
padding: 40px;
}
.score {
text-align: center;
font-size: x-large;
}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>J-Game</title>
</head>
<body width=100%;>
<table width=100%;>
<tr>
<td>
<table width=60% class="normalTableSize" style="background-color: green; margin-top: 1%; border: 3px solid black;">
<tr>
<td>
<div style="width:60%; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px;">
<a class="navigationbarFont" href="">Home</a> <a style="margin-left: 5%;" class="navigationbarFont" href="">Games</a>
</div>
</td>
</tr>
</table>
<table>
**
<!--!!!!!!!!!!!!!!!!!!!!!!!!! VALUE GETS DISPLAYED HERE!!!!!!-->
<p id="score" class="score">0</p>
**
</table>
<!-- Maybe I should implement Buttons instead of table squares-->
<table width=60%; class="normalTableSize" style="text-align: center;">
<tr>
<td>
<button onclick="buttonclick(this.id)" id="1" class="buttons">1</button>
</td>
<td>
<button onclick="buttonclick(this.id)" id="2" class="buttons">2</button>
</td>
<td>
<button onclick="buttonclick(this.id)" id="3" class="buttons">3</button>
</td>
</tr>
<tr>
<td>
<button onclick="buttonclick(this.id)" id="4" class="buttons">4</button>
</td>
<td>
<button onclick="buttonclick(this.id)" id="5" class="buttons">5</button>
</td>
<td>
<button onclick="buttonclick(this.id)" id="6" class="buttons">6</button>
</td>
</tr>
<tr>
<td>
<button onclick="buttonclick(this.id)" id="7" class="buttons">7</button>
</td>
<td>
<button onclick="buttonclick(this.id)" id="8" class="buttons">8</button>
</td>
<td>
<button onclick="buttonclick(this.id)" id="9" class="buttons">9</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- <button onclick="hi">Click me!</button> -->
<button onclick="stopAlerting()">Stop alerting!</button>
<script>
// Declaring variables
**
//!!!!!!!!!!!!! TRIED TO USE "sesssionStorage", but couldnt figure out a way to use it well.
sessionStorage.setItem('scoreamount', 0);
let score = 0;
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
**
let gameover = false;
let rawRandNumber = randomNumber();
let randomID = notZeroDetector();
// Main Codeblock for the game
if(gameover === false) {
**
//!!!!!!!!! VALUE GETS DISPLAYED ON THE PAGE AS "SCORE" !!!!!!!!!!!!!!!!!!!!!!!
document.getElementById('score').innerHTML = sessionStorage.scoreamount;
**
squareGetsRed(randomID);
} else {
console.log("U lost")
}
// Click button reaction
function buttonclick(buttonid){
if(buttonid == randomID){
**
//!!!!!!!!! BUG (Value isnt saving after page reload) !!!!!!!!!!!!!!!!!!!!!!!
score++;
sessionStorage.scoreamount = score;
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
**
location.reload();
} else {
gameover = true;
alert("Wrong Button");
location.reload();
}
}
// Random Number function
function randomNumber(){
return Math.floor(Math.random() * 10);
}
// Return 1 if rawRandNumber = 0
function notZeroDetector() {
if(rawRandNumber === 0){
return 1;
} else {
return rawRandNumber;
};
}
// Makes Squares red
function squareGetsRed(number) {
document.getElementById(number).style["background-color"] = "red";
}
function stopAlerting(){
clearInterval(hi);
}
</script>
</body>
</html>
您可以在JS中使用localStorage：
localStorage.setItem('yourScore', '123'); // Set the value
var score = localStorage.getItem('yourScore'); // retrieve the value from localStore
if (localStorage.getItem('yourScore') === null) {
// if the key yourScore is null, there's no score registered
}
sessionStorage.setItem('scoreamount', 0);
let score = 0;
document.getElementById('score').innerHTML = scoreamount;
score++;
sessionStorage.scoreamount = score;
@mplungjan sessionStorage.scoreamount=分数；在功能上等同于sessionStorage.setItem'scoreamount'，score；。使用sessionStorage.setItem'scoreamount'，0；在页面加载时，您总是无条件地将scoreamount覆盖为0。您从不检查是否已经定义了值。@k0pernikus，sessionStorage在堆栈代码段中不起作用。您有什么理由重新加载页面吗？
score++;
sessionStorage.scoreamount = score;
scoreamount++;
sessionStorage.scoreamount = scoreamount;