使用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 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
jquery仿微信聊天界面
May 06 jQuery
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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学习笔记之一
2011/01/17 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
JavaScript 基础问答三
2008/12/03 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
中学生差生评语
2014/01/30 职场文书
2014高考励志标语
2014/06/05 职场文书
经济类毕业生求职信
2014/06/26 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
单位婚育证明范本
2014/11/21 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电