当我使用 location.href 时，我可以避免 html 重置我的 javascript 变量吗？

Question

我的新项目是一个小型 "puzzle" 游戏，您进入一个房间并解决里面的谜题，然后当您返回关卡 select 部分时，它会打开下一个关卡。

到目前为止，我一直在使用一个变量 "lock" 来计算每次你通过一个级别时的计数，如果 "lock" 的值与它会让你通过的级别编号相对应。

问题是，当我使用 location.href 时，它似乎重置了 "lock" 变量。

Html 等级 select:

//html, link to js and some text
<h1>
<img src="assets/Nextbutton1.png" onclick="t1()" width="100" //1st level button
height="100"> <br>
<img src="assets/Nextbutton2.png" onclick="t2()" width="100" //2nd level button
height="100">

赢得屏幕html

<body>
<h1 align="center"> Congratulations</h1>
<button align="center" onclick="joo()">Back to level select</button>

Javascript 几乎所有内容

var lock;
var taso2;  // future stuff
var taso3 = 2; //future stuff

function joo(){

location.href='index.html'
if (lock == 0) // if statement so you dont progress by playing 1st level over and over
{
lock += 1;}
}

function t2() {
if (lock > 0) {
location.href='Taso2.html';
}
else { alert("You have to beat the previous levels first") }
}

function t1() {
location.href='Taso1.html';
}

Answer 1

HTML本质上就是'memoryless'。这意味着默认情况下它会在每次页面刷新时重置其变量。但是，有一些方法可以保留您的变量。从 w3schools 开始，实现此目的的方法是使用

window.localStorage - 存储没有有效期的数据
window.sessionStorage - 存储一个会话的数据（浏览器选项卡关闭时数据丢失）

同样来自同一网站：

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

请注意，这都是使用 Vanilla JavaScript，因为您没有在问题中指明任何框架。

Answer 2

localStorage 不仅在页面加载之间同步变量，它还同步选项卡之间的变量。

如果您只想在一个浏览器选项卡中执行此操作，而不影响其他选项卡，则应使用 sessionStorage 而不是 localStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

当我使用 location.href 时，我可以避免 html 重置我的 javascript 变量吗？

Can I avoid html resetting my javascript variable when I use location.href?

html

javascript

var