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

Question

My new project is a small "puzzle" game where you enter a room and solve a puzzle inside, then when you go back to the level select section it opens up the next level.

I have thus far been using a single variable "lock" to count up once every time you beat a level and if the value of "lock" corresponds with the level number it would let you through.

Problem is that it seems when I use location.href it resets the "lock" variable.

Html for level 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">

Win screen html

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

Javascript for pretty much everything

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

When completing a level: `localStorage.setItem('lock', lock);`. When you need to determine what levels they have access to: `lock = localStorage.getItem('lock');`. — Mordred, Aug 21 '19 at 19:53
May you could pass the variables as query params (with ?var=foo after the .html-extension). But be careful, the variables are not secure and can be modified easily. — Monarchis, Aug 21 '19 at 20:11

AGoranov · Accepted Answer · 2019-08-21T20:08:18.123

HTML in its nature is 'memoryless'. This means that by default it resets its variables every time the page refreshes. However, there are ways to preserve your variables. From w3schools, the way to achieve this is to either use

window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

Again from the same website:

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

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

Please note that this is all using Vanilla JavaScript, as you haven't indicated any frameworks in your question.

Thank you, this and finding out I had to define "lock" as an integer finally got the system working. — Sabishī, Aug 22 '19 at 06:38

score 0 · Answer 2 · answered Aug 21 '19 at 20:16

localStorage not only sync variable between page loading, it also sync variable between tabs.

if you only want this behavior in one browser tab, not affecting other tabs, you should use sessionStorage instead of localStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

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

2 Answers2