使用JS如何才能取得SessionStorage的值

這篇文章為大家介紹了使用js取得sessionstorage中的值，首先取得它是為了將獲得的資訊輸出或alert（),其次，在靜態頁面中，如果使用sessionStorage就相當於在動態頁面裡連接了資料庫一樣，具體內容詳情大家參考下本文

取得sessionStorage的意義

首先取得它是為了將獲得的資訊輸出或alert（）；讓人很容易看到，

其次，在靜態頁面中，如果使用sessionStorage就相當於在動態頁面裡連接了資料庫一樣

例如：我上一篇所做的為button按鈕添加回車事件的項目中所用到的可以使用js中的sessionStorage獲取頁面輸入的信息，也可以獲得後台計算所得的數據，並且顯示出來。

廢話不多說，看程式碼重要：

具體實作

#

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

以上程式碼是取得username的值並傳到下一個介面

並且獲得password的值與事先設定好的對比，不同就是錯誤就不可以登入

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

取得前段頁輸入的值並且顯示至對應的位置

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

並且判斷是否有sessionStorage的值，如果沒有，自動返回登入頁面，並做出對應的提示

點擊事件觸發後清空sessionStorage的值

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

當點擊id為esc的按鈕時觸發clear事件

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

則自動返回登入介面

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

pace.js和NProgress.js如何使用載入進度外掛（詳細教學）

##在Vue元件中有關自訂事件（詳細教學）

PHP閉包和匿名函數（詳細教學）

在微信小程式中如何使用三級聯動選擇器

使用jquery如何實現手風琴特效

以上是使用JS如何才能取得SessionStorage的值的詳細內容。更多資訊請關注PHP中文網其他相關文章！