使用JS获取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的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

您可能感兴趣的文章:

  • JS 中LocalStorage和SessionStorage的使用
  • JS中LocalStorage与SessionStorage五种循序渐进的使用方法
时间: 2018-01-10

JS 中LocalStorage和SessionStorage的使用

最近因为项目上需要使用到客户端存储,所以稍微研究了一下,以下说说自己的理解和使用经验 1.调用方法相同 各自都包含以下几种操作: //根据key获取对应的值; window.sessionStorage.getItem(key); window.localStorage.getItem(key); //新增key-value,若key已存在,则更新value; window.sessionStorage.setItem(key,value); window.localStorage.setIte

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现). localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在. sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了. 不同

php中请求url的五种方法总结

本文主要给大家介绍了关于php中请求url的五种方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 五种方法: 前三种都是php基本的文件操作函数 curl()是php扩展需要开启,linux下需要安装 exec()执行的是linux命令行下的命令wget下载远程文件 其中wget命令在本地虚机测试请求http://www.baidu.com时,没有成功,在远程服务器上却可以,考虑时DNS解析的问题,于是直接请求IP成功下载了index.html的文件. 这里只提供了方法,其中的

JS中检测数据类型的几种方式及优缺点小结

1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string"."boolean"."undefined"."object"."function" 局限性: 1)typeof null ->"object" 2)检测的不管是数组还是正则都返回的是"ob

JS中把函数作为另一函数的参数传递方法(总结)

今天在给元素注册事件的时候,使用addEventListener遇到了一个问题,这个好像之前也遇到过,觉得有必要总结一下,就是js函数作为参数引发的问题.首先看以下代码,觉得下面代码有问题吗?是否能达到点击id3对应的元素后,弹出id3呢? 例1 var obj3=document.getElementById('id3'); obj3.addEventListener('click',curClick('id1'),true); function curClick(id){ alert(id)

js中字符型和数值型数字的互相转化方法(必看)

数值型的数字字符型数字之间如何互相转化呢,其实有个很简便的方法: 比如字符串"123.45"和数值型123.45. 字符串型只要在前面加个+好就可以了. 数值型只要在后面加个空字符串""就可以了. 上图: 以上这篇js中字符型和数值型数字的互相转化方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

JS中的数组转变成JSON格式字符串的方法

有一个JS数组,如: var arr = [["projectname1","projectnumber1"],["projectname2","projectnumber2"],["projectname3","projectnumber3"]]; 想将此数组转换成JSON字符串,如: var jsonarr = [{"projectname":projectnam

ThinkPHP中Widget扩展的两种写法及调用方法详解

本文实例讲述了ThinkPHP中Widget扩展的两种写法及调用方法.分享给大家供大家参考,具体如下: Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: class ArticleWidget extends Widget { /** * * @param array $data * @return type * 调用方法:{:W('ArticleList

JS中使用FormData上传文件、图片的方法

关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F

js中if语句的几种优化代码写法

尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法. 一.使用常见的三元操作符 复制代码 代码如下: if (foo) bar(); else baz(); ==> foo?bar():baz(); if (!foo) bar(); else baz(); ==> foo?baz():bar(); if (foo) return bar(); else return baz