Javascript Problema ao salvar o VALUE de um <select>

[thiagows72]

Olá pessoal,
Sou novo aqui e estou dando os primeiros passos na programação, estou com a seguinte dificuldade, agradeço se puderem me explicar o que pode estar acontecendo para que eu entenda o contexto.

Tenho um html que pega a dificuldade de um jogo escolhida pelo usuário, e um botão para iniciar o jogo (que no caso está em outro html):

 

<div class="container">
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<h1>Game</h1>
</div>
</div>
</div>

<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<select id="dificuldade">
<option value="easy">Easy</option>
<option value="normal">Normal</option>
<option value="hard">Hard</option>
</select>
</div>
</div>
</div>

<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<button onclick="play()">Jogar!</button>
</div>
</div>
</div>

</div>

No meu arquivo js tentei fazer com ele ele pegasse o valor do select com id "dificuldade" e salvasse em uma váriavel declarada no meu arquivo js, e depois chamar a página do jogo.

 

var nivel = 1300
function play() {

nivel = document.getElementById('dificuldade').value


if (nivel === 'easy') {
tempo = 1400
} else if (nivel === 'normal') {
tempo = 1100
} else if (nivel === 'hard') {
tempo = 800
}

window.location.href = 'jogo.html'

}

O que ocorre é que o valor atribuído a variável nivel é perdido depois que o html jogo.html é carregado, fazendo que o valor da variável nivel volte ao valor que está na declaração da variável.
Gostaria de entender melhor sobre esse comportamento e se existe alguma forma de salvar e deixar salvo o VALUE do select da outra página mesmo após de encerrá-la.

 

Lembrando que sou iniciante e estou estudando html e javascript

Desde já agradeço pessoal!

[DiF]

@thiagows72 Seja bem vindo ao Clube do Hardware.

 

Note que você armazena um dado em uma variável, mas é só localmente, ou seja, ao carregar outro arquivo, você não consegue passar a diante dessa forma.

Você tem duas possíveis soluções que penso no momento.( pode ser que exista outros métodos)

 

1) Selecionar a dificuldade diretamente no arquivo do jogo. 

 

2) Armazenar o valor no local storage. Dessa forma, ele vai meio que lembrar o que você definiu.

 

Exemplo:

 

nivel = document.getElementById('dificuldade').value
localStorage.setItem("dificuldade",nivel);

 

Para recuperar o valor:

localStorage.getItem("dificuldade");

 

Eaí lá dentro do arquivo do jogo, você faz o teste...  SE o valor for 1400, é easy, senão SE, 1100 é normal, senão é difícil

 

Bem, apontei um norte, é com você implementar isso e descobrir como funciona!

[thiagows72]

Perfeito, a segunda opção já resolveu pra mim!

 

Não tinha conhecimento do "localStorage".

 

Muitíssimo obrigado!!