使用JS获取SessionStorage的值

 更新时间:2018年01月12日 10:21:45   作者:全满 关注  
这篇文章给大家介绍了使用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>

获取前段页面输入的值并且显示至对应的位置

<div id="yhm"></div> 

并且判断是否有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> 

则自动返回登录界面

总结

以上所述是小编给大家介绍的使用JS获取SessionStorage的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript 函数式编程

    javascript 函数式编程

    javascript 函数式编程...
    2007-08-08
  • echarts多条折线图动态分层的实现方法

    echarts多条折线图动态分层的实现方法

    这篇文章主要介绍了echarts多条折线图动态分层的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • uniapp使用webview嵌入vue页面及通信实现方式

    uniapp使用webview嵌入vue页面及通信实现方式

    项目中有需要嵌入其他H5的页面的业务需求,这篇文章主要给大家介绍了关于uniapp使用webview嵌入vue页面及通信实现方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • HTML使用js给input标签增加disabled属性的方法

    HTML使用js给input标签增加disabled属性的方法

    最近项目上提出一个经常遇到的需求,点击新增时input可输入,点击编辑时input置灰,下面这篇文章主要给大家介绍了关于HTML使用js给input标签增加disabled属性的相关资料,需要的朋友可以参考下
    2024-06-06
  • 使用electron制作满屏心特效的示例代码

    使用electron制作满屏心特效的示例代码

    这篇文章主要介绍了使用electron制作满屏心特效的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 前端中间件Midway的使用教程

    前端中间件Midway的使用教程

    Midway 基于 TypeScript 开发,结合了面向对象(OOP + Class + IoC)与函数式(FP + Function + Hooks)两种编程范式,并在此之上支持了 Web / 全栈 / 微服务 / RPC / Socket / Serverless 等多种场景,这篇文章主要介绍了前端中间件Midway的使用,需要的朋友可以参考下
    2023-05-05
  • JavaScript中的无阻塞加载性能优化方案

    JavaScript中的无阻塞加载性能优化方案

    这篇文章主要介绍了JavaScript中的无阻塞加载性能优化方案,本文讲解了Deferred Scripts 延期脚本、Dynamic Script Elements 动态脚本元素、XMLHttpRequest Script Injection XHR脚本注入等内容,需要的朋友可以参考下
    2014-10-10
  • JS基于面向对象实现的拖拽功能示例

    JS基于面向对象实现的拖拽功能示例

    这篇文章主要介绍了JS基于面向对象实现的拖拽功能,涉及javascript面向对象与页面元素动态操作的相关技巧,需要的朋友可以参考下
    2016-12-12
  • JavaScript中this的用法实例分析

    JavaScript中this的用法实例分析

    这篇文章主要介绍了JavaScript中this的用法,结合实例形式分析了this的功能、常见用法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    这篇文章主要介绍了JS实现兼容各种浏览器的获取选择文本的方法,可实现鼠标拖动选择文本的同时,下方显示区同步实时显示选中内容的功能,涉及javascript响应鼠标事件及页面元素动态操作技巧,需要的朋友可以参考下
    2016-06-06

最新评论