使用JS获取SessionStorage的值


Posted in Javascript onJanuary 12, 2018

获取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 相关文章推荐
json数据与字符串的相互转化示例
Sep 18 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 #Javascript
web前端vue filter 过滤器
Jan 12 #Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 #Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 #Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 #Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 #Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 #Javascript
You might like
php 设计模式之 工厂模式
2008/12/19 PHP
php checkbox 取值详细说明
2010/08/19 PHP
PHP里的中文变量说明
2011/07/23 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
python文件名和文件路径操作实例
2017/09/29 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
jupyter notebook清除输出方式
2020/04/10 Python
Python验证码截取识别代码实例
2020/05/16 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
大门门卫岗位职责
2013/11/30 职场文书
后勤部长岗位职责
2013/12/14 职场文书
中学生演讲稿
2014/04/26 职场文书
小学教师工作总结2015
2015/04/07 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
感恩教师节主题班会
2015/08/12 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
MySQL创建表操作命令分享
2022/03/25 MySQL
python实现商品进销存管理系统
2022/05/30 Python