使用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五种循序渐进的使用方法
赞 (0)

相关推荐

  • 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五种循序渐进的使用方法

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

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

  • 使用JS获取SessionStorage的值

    获取sessionStorage的意义 首先获取它是为了将获得的信息输出或者alert():让人容易看到, 其次,在静态页面中,如果使用sessionStorage就相当于在动态页面里连接了数据库一样 例如:我上一篇所做的为button按钮添加回车事件的项目中所用到的可以使用js中的sessionStorage获取页面输入的信息,也可以获得后台计算所得的数据,并且显示出来. 废话不多说,看代码重要: 具体实现 <script type="text/javascript">

  • js 获取radio按钮值的实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • 通过封装scroll.js 获取滚动条的值

    具体代码如下所示: function Obj(){} Obj.prototype={ scroll:function(){ /* 主要是做兼容处理 这里必须时!=null 因为默认值和每次滚动的时侯 都可以值为0 但是 if(0)为假 所以就只要不为null 就执行 */ if(window.pageYOffset!=null){ /*IE9 和其他标准浏览器*/ return { left:window.pageXOffset, top:window.pageYOffset } } /*声明了

  • js获取下拉列表的值和元素个数示例

    js获取下拉列表框元素的个数 复制代码 代码如下: <!DOCTYPE html><html><head><script>function getLength(){alert(document.getElementById("mySelect").length);//元素个数}</script></head><body> <form><select id="mySelect&

  • vue.js 获取当前自定义属性值

    假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class="left t-title" @click='getDataId' :data-id="item.id"></h5> <script> methods: { getDataId() { console.log(this.data-id); }

  • js获取ajax返回值代码

    复制代码 代码如下: z = $.ajax({url:"__URL__/add/",type:'POST',dataType:"json",async:false,cache:false,data:"step=ajax&ajax_type=checkEmail&email="+email,}).responseText;

  • js获取 type=radio 值的方法

    复制代码 代码如下: <ul> <li> <input type="radio" name="radio" value="前台支付 " id="radio" />前台支付 --如需整晚保留,请预付房费. </li> <li> <input type="radio" name="radio" value="担保支付

  • JS获取后台Cookies值的小例子

    复制代码 代码如下: function getCookie(name)    {            var offset,cookieValue;        var search=name+"=";        if(document.cookie.length>0)        {            offset=document.cookie.indexOf(search);            if(offset!=-1)            {    

  • js获取.aspx页面里面的服务器控件和.ascx中的服务器控件值

    A.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="OrderManage_A" %> <%@ Register Src="../UserControl/CtrlCalendar.ascx" TagName="CtrlCalendar&qu

  • js获取所有checkbox的值的简单实例

    例: <input type="checkbox" name="test" value="值1" />显示的内容 <input type="checkbox" name="test" value="值2" />显示的内容 <input type="checkbox" name="test" value="值3

随机推荐