Problème de mot de passe

Bonjour,

je veux sécuriser certains fichiers dans mon site par un mot de passe,
mais le problème c'est que il me demande le mot de passe a chaque fois
que click dessus, de plus quand je saisie le mot de passe correcte et je click sur ok normalement une page sera afficher, j'arrive pas a faire ca
donc je veux que le mot de passe soit saisie une seul fois et que le click du bouton "valider" engendre le traitement puis m'affiche la page de ces fichier directement(dans le cas du mot de passe et nom d'utilisateur correctes)

mon fichier js:

var x='faux';
function getValue(){
    // Sélectionner l'élément input et récupérer sa valeur
    var inputnom = document.getElementById("Nomutilisateur").value;
    var inputpassword = document.getElementById("Motdepasse").value;
    // Afficher la valeur
    if ((inputnom == 'xxx') && (inputpassword == 'yyy')) {
        x='vrai';
        alert("Nom d'utilisateur et mot de passe correcte !" );
        
  
    } else if ((inputnom == 'xxx') && (inputpassword != 'yyy')) {
        alert("Mot de passe incorrecte !");

    } else if ((inputpassword == 'xxx') && (inputnom != 'yyy')) {
        alert("Nom d'utilisateur incorrecte !");

    } else alert("Nom d'utilisateur et mot de passe incorrecte !");

}
function mafonction(){
    if(x=='vrai'){
     document.getElementById("idf").href="pagepdf.html";
            
           
    }else  {
        document.getElementById("idf").href="pagemotdepasse.html";
           
       
  
    }   
}

idf c'est le id du lien :

<li><a href="" id="idf" onclick="mafonction()">ma page </a></li>

partie html:

 <div class="container">
    <form action="" method="POST" class="login-email">
        <p class="login-text" >Veuillez saisir les champs suivants</p>
        <br>
        <div class="input-group">
            <input type="text" id="Nomutilisateur" placeholder="Nom d‘utilisateur" name="Nomutilisateur" required>
        </div>
            <div class="input-group">
                <br>
            <input type="password" id="Motdepasse" placeholder="Mot de passe" name="Motdepasse" required>
        </div>
       <div class="input-group">
        <button type="button" name="submit" class="btn" onclick="getValue();">Valider</button>
        </div>
        </form>
</div>

SVP aidez mo ,j'arrive pas a avancer!