[AJUDA]Problema ao salvar o VALUE de um <select>

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.

Desde já agradeço pessoal!
Att, Thiago