jQuery实现本地存储用户管理后台
以下是一个简化的代码示例，展示了如何使用jQuery和localStorage来实现一个简单的用户管理界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage User Management</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>User Management</h2>
<input type="text" id="username" placeholder="Username">
<button id="addUser">Add User</button>
<button id="clearUsers">Clear Users</button>
<h3>Users:</h3>
<ul id="usersList"></ul>
<script>
$(document).ready(function() {
loadUsers();
$('#addUser').click(function() {
var username = $('#username').val().trim();
if (username) {
addUser(username);
$('#username').val('');
}
});
$('#clearUsers').click(function() {
clearUsers();
});
});
function loadUsers() {
var users = getUsers();
$('#usersList').empty();
$.each(users, function(index, user) {
$('#usersList').append('<li>' + user + '</li>');
});
}
function addUser(username) {
var users = getUsers();
if (users.indexOf(username) === -1) {
users.push(username);
localStorage.setItem('users', JSON.stringify(users));
loadUsers();
} else {
alert('User already exists.');
}
}
function clearUsers() {
localStorage.removeItem('users');
loadUsers();
}
function getUsers() {
var users = JSON.parse(localStorage.getItem('users')) || [];
return users;
}
</script>
</body>
</html>这段代码实现了用户添加、清空列表以及从localStorage加载用户列表的功能。用户输入的用户名通过localStorage持久化保存，并在页面刷新后依然可用。这是一个简单的本地存储用户管理的例子，适用于学习和小型应用场景。
评论已关闭