Comment obtenir la valeur de SessionStorage en utilisant JS

Cet article vous présente l'utilisation de js pour obtenir la valeur dans sessionstorage. Premièrement, elle est obtenue pour afficher les informations obtenues ou alert(). Deuxièmement, dans une page statique, utiliser sessionStorage équivaut à utiliser sessionStorage dans une page dynamique. .C'est la même chose que la connexion à la base de données. Veuillez vous référer à cet article pour plus de détails

La signification d'obtenir sessionStorage

Obtenez-le d'abord. afin d'afficher les informations obtenues. Ou alert(); c'est facile à voir,

Deuxièmement, dans une page statique, utiliser sessionStorage équivaut à se connecter à la base de données dans une page dynamique

Par exemple : mon dernier article Pour le projet qui ajoute un événement retour chariot au bouton bouton, vous pouvez utiliser sessionStorage en js pour obtenir les informations saisies sur la page, et vous pouvez également obtenir les données calculées en arrière-plan et les afficher .

Pas grand chose de bêtises, il est important de regarder le code :

Implémentation spécifique

<script type="text/javascript">
    function login(){
      var username=window.document.getElementById("username").value;
      var password=window.document.getElementById("password").value;
      if(password=="123456")
      {
        window.sessionStorage.setItem("username", username);
        window.location.href="../index1.html" rel="external nofollow" ;
      }else{
        alert("密码错误请输入正确的密码，例如：123456！");
        return false;
      }
    }
</script>
<input type="text" id="username" class="11" placeholder="请输入真实姓名"/>
<input type="password" id="password" placeholder="请输入密码（默认密码123456）"/>
<input type="button" value="登录考试" onclick="login()">

Le code ci-dessus consiste à obtenir le nom d'utilisateur. La valeur est transmise à l'interface suivante

et la valeur du mot de passe est obtenue et comparée à la valeur prédéfinie. La différence est que s'il y a une erreur, vous ne pouvez pas vous connecter

<script>
   $(function () {
     var username= window.sessionStorage.getItem("username")
     $("#yhm").html("登录用户："+username)
     $("#name").html(username)
     if(window.sessionStorage.getItem("username")===null){
       alert("您还没有登录，请登录后重试！")
       window.location.href="Pages/index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
     }
     $("#esc").on("click",function(){
       window.sessionStorage.clear();
       window.location.href="Pages/index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
     });
  })
 </script>

Récupérez la valeur saisie sur la page précédente et affichez-la à la position correspondante

<p id="yhm"></p>

et déterminez s'il existe une valeur de sessionStorage. Sinon, revenez automatiquement à la page de connexion et effectuez. invites correspondantes

Effacez la valeur sessionStorage après le déclenchement de l'événement de clic

<script>
$("#esc").on("click",function(){
       window.sessionStorage.clear();
       window.location.href="Pages/index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
     });
</script>

Lorsque le bouton avec l'identifiant esc est cliqué, l'événement d'effacement est déclenché

<button id="esc" style="background-color: #FF0000">退出考试系统</button>

Il reviendra automatiquement à l'interface de connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à l'avenir. Tout le monde est utile.

Articles associés :

Comment utiliser le plug-in de progression du chargement avec Pace.js et NProgress.js (tutoriel détaillé)

Dans les composants Vue À propos des événements personnalisés (tutoriel détaillé)

Fermetures PHP et fonctions anonymes (tutoriel détaillé)

Comment en utiliser trois dans le Sélecteur en cascade de l'applet WeChat

Comment utiliser jquery pour obtenir des effets d'accordéon

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!