How to get the value of SessionStorage using JS

This article introduces you to using js to obtain the value in sessionstorage. First, it is obtained to output the obtained information or alert(). Secondly, in a static page, using sessionStorage is equivalent to using sessionStorage in a dynamic page. It's the same as connecting to the database. Please refer to this article for details.

The meaning of obtaining sessionStorage

First obtain it in order to output the obtained information. Or alert(); it is easy to see,

Secondly, in a static page, using sessionStorage is equivalent to connecting to the database in a dynamic page

For example: my last article For the project that adds a carriage return event to the button button, you can use sessionStorage in js to obtain the information entered on the page, and you can also obtain the data calculated in the background and display it.

Not much nonsense, it’s important to look at the code:

Specific implementation

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

The above code is to obtain the value of username and Pass to the next interface

and get the password value and compare it with the pre-set one. The difference is that if there is an error, you cannot log in

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

Get the value entered on the previous page and display it in the corresponding position

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

And determine whether there is a sessionStorage value. If not, automatically return to the login page and make corresponding prompts

Clear the sessionStorage value after the click event is triggered

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

When The clear event is triggered when the button with the id esc is clicked

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

and it will automatically return to the login interface

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use the loading progress plug-in with pace.js and NProgress.js (detailed tutorial)

In Vue components About custom events (detailed tutorial)

PHP closures and anonymous functions (detailed tutorial)

How to use three in the WeChat applet Cascading selector

How to use jquery to achieve accordion effects

The above is the detailed content of How to get the value of SessionStorage using JS. For more information, please follow other related articles on the PHP Chinese website!