使用js获取sessionStorage

简介: 获取sessionStorage的意义首先获取它是为了将获得的信息输出或者alert();让人容易看到,其次,在静态页面中,如果使用sessionStorage就相当于在动态页面里连接了数据库一样例如:我上一篇所做的为button按钮添加回车事件的项目中所用到的可以使用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";
            }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";
          }
          $("#esc").on("click",function(){
              window.sessionStorage.clear();
              window.location.href="Pages/index.html";
          });
    })

  </script>

获取前段页面输入的值并且显示至对应的位置
<div id="yhm"></div>
并且判断是否有sessionStorage的值,如果没有,自动返回登录页面,并做出相应的提示

点击事件触发后清空sessionStorage的值

<script>
$("#esc").on("click",function(){
              window.sessionStorage.clear();
              window.location.href="Pages/index.html";
          });
</script>

当点击id为esc的按钮时触发clear事件
<button id="esc" style="background-color: #FF0000">退出考试系统</button>
则自动返回登录界面

相关文章
|
3月前
|
存储 JavaScript
js中的sessionStorage
js中的sessionStorage
30 0
|
3月前
|
存储 JavaScript 前端开发
JavaScript中的sessionStorage
JavaScript中的sessionStorage
29 0
|
3月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
|
4天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
10 0
|
5月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
45 0
|
6月前
|
存储 JavaScript 前端开发
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(1)
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(1)
|
6月前
|
存储 JavaScript 前端开发
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(2)
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(2)
|
6月前
|
存储 缓存 前端开发
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(3)
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(3)
|
7月前
|
存储 JavaScript 前端开发
js本地存储localStorage和sessionStorage
js本地存储localStorage和sessionStorage
|
9月前
|
存储 移动开发 JavaScript
js本地存储(localStorage)和(sessionStorage)
js本地存储(localStorage)和(sessionStorage)
179 0