So ermitteln Sie den Wert von SessionStorage mithilfe von JS

Dieser Artikel führt Sie in die Verwendung von js zum Abrufen des Werts in sessionStorage ein. Erstens wird er zum Ausgeben der erhaltenen Informationen oder von Alert() verwendet. Zweitens entspricht die Verwendung von sessionStorage der Verwendung von sessionStorage auf einer dynamischen Seite . Es ist dasselbe wie das Herstellen einer Verbindung zur Datenbank. Weitere Informationen finden Sie in diesem Artikel.

Die Bedeutung des Abrufens von sessionStorage

Beziehen Sie es zuerst Um die erhaltenen Informationen auszugeben, ist dies leicht zu erkennen.

Zweitens entspricht die Verwendung von sessionStorage der Verbindung zur Datenbank auf einer dynamischen Seite

Zum Beispiel: mein letzter Artikel Für das Projekt, das der Schaltfläche ein Wagenrücklaufereignis hinzufügt, können Sie sessionStorage in js verwenden, um die auf der Seite eingegebenen Informationen abzurufen, und Sie können auch die im Hintergrund berechneten Daten abrufen und anzeigen .

Nicht viel Unsinn, es ist wichtig, sich den Code anzusehen:

Spezifische Implementierung

<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()">

Der obige Code soll Rufen Sie den Wert des Benutzernamens ab und übergeben Sie ihn an die nächste Schnittstelle

. Rufen Sie den Wert des Passworts ab und vergleichen Sie ihn mit dem voreingestellten Wert. Der Unterschied besteht darin, dass Sie sich nicht anmelden können, wenn ein Fehler auftritt

<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>

Rufen Sie den auf der vorherigen Seite eingegebenen Wert ab und zeigen Sie ihn an der entsprechenden Position an

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

Und ermitteln Sie, ob ein sessionStorage-Wert vorhanden ist, kehren Sie automatisch zur Anmeldeseite zurück und machen Sie den entsprechenden Wert Eingabeaufforderungen

Löschen Sie den sessionStorage-Wert, nachdem das Klickereignis ausgelöst wurde

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

Wenn auf die Schaltfläche mit der ID esc geklickt wird, wird das Löschereignis ausgelöst

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

und das wird auch der Fall sein automatisch zur Anmeldeoberfläche zurückkehren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie das Ladefortschritts-Plug-in mit Pace.js und NProgress.js (ausführliches Tutorial)

In Vue-Komponenten Über benutzerdefinierte Ereignisse (ausführliches Tutorial)

PHP-Verschlüsse und anonyme Funktionen (ausführliches Tutorial)

Wie man drei im verwendet WeChat-Applet Cascading Selector

So verwenden Sie JQuery, um Akkordeoneffekte zu erzielen

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie den Wert von SessionStorage mithilfe von JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!