使用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 相关文章推荐
javascript中的关于类型转换的性能优化
Dec 14 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
将list转换为json失败的原因
Dec 17 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
深入浅析react native es6语法
Dec 09 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
JavaScript实现轮播图片完整代码
Mar 07 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生成N个不重复的随机数实例
2013/11/12 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
对Python中的@classmethod用法详解
2018/04/21 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
便利店投资的创业计划书
2014/01/12 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
党员评议思想汇报
2014/10/08 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS