JavaScript 操作 SessionStorage：获取、校验与清理实战
本文介绍如何在静态页面中利用 JavaScript 操作 SessionStorage 实现类似数据库的数据交互。通过具体代码示例，演示如何获取用户输入的账号密码、校验登录状态、显示当前登录用户信息，并在退出时清理会话数据以保障安全。
SessionStorage 的作用与获取意义
了解如何获取 SessionStorage 中的数据是前端开发的基础环节。
主要目的是将获取到的信息输出或弹窗显示，以便直观查看结果。
在静态网页环境中，使用 SessionStorage 可以模拟动态页面连接数据库的功能，实现数据的临时存储与读取。
例如，在之前为按钮添加回车事件的项目中，利用 JavaScript 的 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 的按钮时，触发清除会话的事件。
<button id="esc" style="background-color: #FF0000">退出考试系统</button> 执行完毕后自动返回登录界面。
总结上述内容。
以上介绍了使用 JavaScript 获取 SessionStorage 值的方法，希望有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28