时间戳

首页 > 解决方案 > 当我使用 location.href 时，我可以避免 html 重置我的 javascript 变量吗？

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

问题描述

我的新项目是一个小型“拼图”游戏，你进入一个房间并解决里面的一个谜题，然后当你回到关卡选择部分时，它会打开下一个关卡。

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

问题是当我使用location.href它时似乎会重置“锁定”变量。

用于级别选择的 Html：

//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';
}

标签： javascripthtmlvar

解决方案

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

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

再次来自同一网站：

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

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

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

推荐阅读