话不多说，直接上代码，有用麻烦点个免费的赞赞。超级好用版。

目录结构如该图所示，只要将文件命名成图上三种。代码即可正常运行。分别有三个文件，一个是app.js，放学生信息删除添加查询主要逻辑代码。login.html放登录页面样式以及相关逻辑。studentList.html 放置学生管理的页面。

运行效果图：

代码：

app.js

let temData = {studentList: [{id: '1',name: "爱吃饭的小恐龙",age: "20",gender: "男",},{id: '2',name: "付渐渐",age: "19",gender: "男",}]}$(document).ready(function () {// 执行页面加载时获取学生列表getStudentList();//退出登录$('.loginOut').click(function () {loginOut();});// 监听添加学生信息表单提交事件$('.box1').submit(function (event) {event.preventDefault();addStudentInfo();});// 监听修改学生信息表单提交事件$('.box2').submit(function (event) {event.preventDefault();confimEdit()});// 监听编辑按钮点击事件$('table').on('click', '.btn-primary', function () {var id = $(this).closest('tr').find('td:eq(0)').text();editStudentInfo(id);});// 监听删除按钮点击事件$('table').on('click', '.btn-danger', function () {var id = $(this).closest('tr').find('td:eq(0)').text();deleteStudentInfo(id);});//监听清空学生表点击事件$('.tool').click(function () {clearStudent();});//监听搜索事件$('#search-button').on('click', function () {const keyword = $('#search-input').val();performSearch(keyword);});});// 获取学生列表function getStudentList() {const dataString = localStorage.getItem('myData'); // 从localStorage中获取字符串数据const data = JSON.parse(dataString); // 将字符串转换为原始的JavaScript对象if (data) {temData = data}displayStudentList(temData.studentList);}// 显示学生列表function displayStudentList(studentList) {$('table tbody').empty();studentList.forEach(function (student) {$('table tbody').append(`${student.id}${student.name}${student.age}${student.gender}修改删除`);});}// 添加学生信息function addStudentInfo() {var student = {id: $('#id').val(),name: $('#name').val(),age: $('#age').val(),gender: $('#gender').val()};//做数据安全判断if (!student.id) {alert('ID为空');return;} else if (!student.name) {alert('姓名为空');return;} else if (!student.age) {alert('年龄为空');return;} else if (!student.gender) {alert('性别为空');return;} else if (temData.studentList.findIndex(n => n.id == student.id) != -1) {alert('学号已经存在！');return;}temData.studentList.push(student)localStorage.setItem('myData', JSON.stringify(temData));alert('成功添加学生信息！');getStudentList();$('.box1 form')[0].reset();}//传入初值函数function setData(data) {$('#newId').val(data.id);$('#newName').val(data.name);$('#newAge').val(data.age);$('#newGender').val(data.gender);}//搜索逻辑function performSearch(keyword) {if (!keyword) {getStudentList();} else {let student = temData.studentList.find(student => student.id === keyword);$('table tbody').empty();$('table tbody').append(`${student.id}${student.name}${student.age}${student.gender}修改删除`);}}// 编辑学生信息let needEditIndex = -1;function editStudentInfo(id) {needEditIndex = temData.studentList.findIndex(student => student.id === id);$('.box2').css('visibility', 'visible')setData(temData.studentList[needEditIndex])}//确认修改function confimEdit() {var student = {id: $('#newId').val(),name: $('#newName').val(),age: $('#newAge').val(),gender: $('#newGender').val()};if (!student.id) {alert('ID为空');return;} else if (!student.name) {alert('姓名为空');return;} else if (!student.age) {alert('年龄为空');return;} else if (!student.gender) {alert('性别为空');return;}temData.studentList[needEditIndex] = student;localStorage.setItem('myData', JSON.stringify(temData));alert('成功修改学生信息！');getStudentList();$('.box2').css('visibility', 'hidden');}// 删除学生信息function deleteStudentInfo(id) {const index = temData.studentList.findIndex(student => student.id == id);if (index !== -1) {temData.studentList.splice(index, 1);}localStorage.setItem('myData', JSON.stringify(temData));alert('成功删除该学生！');getStudentList();}//清空数据function clearStudent() {localStorage.removeItem('myData'); // 删除名为“myData”的数据alert('数据清除成功！');location.reload();}//退出登录function loginOut() {sessionStorage.setItem("state", JSON.stringify(false));window.location.href = "login.html";}

login页面

body {font-family: Arial, sans-serif;background-color: #ffffff;}#login-wrapper {height: 520px;width: 100%;}h1 {text-align: center;color: #333;margin-top: 20px;}form {width: 500px;margin: 0 auto;background-color: #ff805b;padding: 80px;padding-left: 80px;padding-right: 80px;border-radius: 5px;box-shadow: 0px 0px 5px #888;}label {display: block;margin-bottom: 10px;color: #f23b24;}input[type="text"],input[type="password"] {padding: 15px;border: none;outline: none;width: 100%;margin-bottom: 30px;border-radius: 5px;box-sizing: border-box;box-shadow: 0px 0px 5px #ccc;}.loginBtn {text-align: center;background-color: #224b8f;color: #fff;padding: 15px;border: none;border-radius: 5px;cursor: pointer;width: 100%;font-size: 16px;margin-top: 30px;}
学生管理系的登录
请登录
用户名:密码:登录let userData = {userList: [{username: "admin",password: "123456",},{username: "jianjian",password: "12921xin",},],};let state = false;sessionStorage.setItem("state", state);let usernameInput = document.querySelector("#username");let passwordInput = document.querySelector("#password");const loginBtn = document.querySelector(".loginBtn");loginBtn.addEventListener("click", () => {if (!usernameInput.value.trim() || !passwordInput.value.trim()) {alert("请输入用户名和密码");return;}userData.userList.forEach((user) => {if (user.username === usernameInput.value) {if (user.password === passwordInput.value) {state = true;sessionStorage.setItem("state", JSON.stringify(state));alert("登录成功");window.location.href = "studentList.html";return;}}});if (JSON.parse(sessionStorage.getItem("state")) === false) {alert("用户名或密码错误，请重新输入");passwordInput.value = "";usernameInput.value = "";}});

studentList.html页面

if (!sessionStorage.getItem("state") || JSON.parse(sessionStorage.getItem("state")) === false) {alert("您未登录，无权访问！！")window.location.href = "login.html";}.input-box-wrpper {display: flex;justify-content: space-between;}.input-box-wrpper .box1,.box2 {width: 50%;box-sizing: border-box;padding: 0 40px;}.input-box-wrpper .box2 {visibility: hidden;}
学生列表  搜索
学号
姓名
年龄
性别
操作
添加学生信息
学号姓名年龄性别男女提交数据重置
修改学生信息
学号姓名年龄性别男女确认修改

完活，很好的代码。记得点赞点赞点赞