首页 > web前端 > js教程 > 正文

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

亚连
发布: 2018-06-12 14:25:05
原创
2942 人浏览过

这篇文章给大家介绍了使用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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板