代码1： beforeCreate: function(){ var id = window.sessionStorage.getItem("id"); if(id != null && id != "" && id != "null"){ $.ajax({ //ajax请求获取用户数据 type: "GET", url: baseUrl + "yonghu/info/" + id, //在请求头中设置Token beforeSend: function(xhr) {xhr.setRequestHeader("token", window.sessionStorage.getItem('token'));}, success: function(res){ if(res.code == 0){ vm.ruleForm = res.data; }else if(res.code == 401) { <%@ include file="../../static/toLogin.jsp"%> }else{ alert(res.msg)} }, }); } }, methods: { } }); 与代码二：function getDetails() { var id = window.sessionStorage.getItem("id"); if(id != null && id != "" && id != "null"){ $("#submitBtn").addClass("修改"); updateId = id; window.sessionStorage.removeItem('id'); $.ajax({ type: "GET", url: baseUrl + "yonghu/info/" + id, beforeSend: function(xhr) {xhr.setRequestHeader("token", window.sessionStorage.getItem('token'));}, success: function(res){ if(res.code == 0){ ruleForm = res.data showImg(); setContent(); setDownloadBtn(); }else if(res.code ==401){ <%@ include file="../../static/toLogin.jsp"%> }else{ alert(res.msg); } }, }); }else{ $("#submitBtn").addClass("新增"); } } 均是一个购物系统后台用户详细页的jsp文件中的代码？他们各自的作用是什么？我觉得这两段代码功能怎么一样？

时间: 2023-06-25 21:07:57 浏览: 108

PDF

使用JS获取SessionStorage的值

给大家介绍了使用js获取sessionstorage中的值，首先获取它是为了将获得的信息输出或者alert（),其次，在静态页面中，如果使用sessionStorage就相当于在动态页面里连接了数据库一样，具体内容详情大家参考下本在本文中，我们将深入探讨如何使用JavaScript来获取`SessionStorage`中的值，以及它在Web开发中的作用。`SessionStorage`是HTML5引入的一种本地存储机制，允许网页在用户关闭和重新打开浏览器会话期间保存数据。这在某些场景下非常有用，比如保持用户的登录状态或临时存储用户输入的信息。我们要了解`SessionStorage`的基本用法。通过`window.sessionStorage`对象，我们可以设置、获取和清除存储的数据。设置值的方法是`setItem()`，例如： ```javascript window.sessionStorage.setItem("key", "value"); ``` 这里的`key`是你想要存储的数据的键，`value`是对应的值。要获取存储的值，可以使用`getItem()`方法： ```javascript var storedValue = window.sessionStorage.getItem("key"); ``` 在提供的示例代码中，`login()`函数展示了如何在用户成功登录时将用户名存储到`SessionStorage`中： ```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; } } ``` 这里，如果密码正确，`username`被设置为`SessionStorage`的`username`键，然后页面重定向到`index1.html`。在其他页面中，可以通过`getItem()`获取并显示用户名，如下面的代码所示： ```javascript $(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"; } // 清除SessionStorage并跳转到登录页面 $("#esc").on("click", function () { window.sessionStorage.clear(); window.location.href = "Pages/index.html"; }); }); ``` 这段代码在页面加载时检查`SessionStorage`中是否存在`username`键，如果不存在则提示用户登录。此外，它还定义了一个点击事件，当用户点击ID为`esc`的元素时，会清除所有`SessionStorage`数据并返回登录页面。 `SessionStorage`的一个关键优势在于它只在同一个浏览器会话内有效。这意味着当用户关闭浏览器或标签页时，存储的数据将被清除，这有助于保护用户隐私。与`LocalStorage`不同，`LocalStorage`的数据不会在浏览器会话结束时清除，因此适用于存储长期需要保留的信息。总结一下，`SessionStorage`是JavaScript中一个重要的本地存储工具，用于在浏览器会话期间存储数据。通过`setItem()`和`getItem()`方法，我们可以方便地设置和获取数据。在登录系统或其他需要临时存储用户信息的场景中，`SessionStorage`提供了一种安全、便捷的方式。

这两段代码的作用都是在页面加载时通过 ajax 请求获取用户详细信息并填充到页面中。它们的不同之处在于第一段代码使用了 Vue.js 的 beforeCreate 钩子函数，并把获取到的数据存储在 Vue 实例中的 ruleForm 对象中；而第二段代码是一个普通的函数，把获取到的数据存储在全局变量 ruleForm 中。虽然这两段代码的功能看起来一样，但是实现方式有所不同，第一段代码使用了 Vue.js 的相关特性，而第二段代码则是纯粹的 jQuery 实现。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通