JSP 页面实现用户名字输入统计并显示 - 基于 localStorage - 常规

要在 JSP 页面中实现用户名字输入后统计并显示输入过的用户名字和数量，您可以使用 JSP 页面中的脚本和标签来实现。以下是一个简单的示例代码：

index.jsp 文件：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>统计用户名字和数量</title>
    <script>
        function countNames() {
            var nameInput = document.getElementById("username");
            var quantityInput = document.getElementById("quantity");
            var name = nameInput.value;
            var quantity = parseInt(quantityInput.value);
            
            // 检查输入是否为空或数量是否有效
            if (name.trim() === "" || isNaN(quantity) || quantity <= 0) {
                alert("请输入有效的用户名字和数量");
                return;
            }
            
            // 获取存储在 localStorage 中的记录
            var records = localStorage.getItem("records");
            if (records) {
                records = JSON.parse(records);
            } else {
                records = [];
            }
            
            // 检查记录是否已存在
            var existingRecord = records.find(function(record) {
                return record.name === name;
            });
            
            if (existingRecord) {
                // 如果记录已存在，更新数量
                existingRecord.quantity += quantity;
            } else {
                // 如果记录不存在，创建新的记录对象并添加到列表中
                records.push({ name: name, quantity: quantity });
            }
            
            // 将更新后的记录存储回 localStorage
            localStorage.setItem("records", JSON.stringify(records));
            
            // 清空输入框
            nameInput.value = "";
            quantityInput.value = "";
            
            // 更新显示记录的列表
            displayRecords();
        }
        
        function displayRecords() {
            var recordsContainer = document.getElementById("records");
            recordsContainer.innerHTML = "";
            
            // 获取存储在 localStorage 中的记录
            var records = localStorage.getItem("records");
            if (records) {
                records = JSON.parse(records);
                
                // 循环显示记录
                records.forEach(function(record) {
                    var row = document.createElement("tr");
                    var nameCell = document.createElement("td");
                    var quantityCell = document.createElement("td");
                    
                    nameCell.textContent = record.name;
                    quantityCell.textContent = record.quantity;
                    
                    row.appendChild(nameCell);
                    row.appendChild(quantityCell);
                    
                    recordsContainer.appendChild(row);
                });
            }
        }
        
        // 页面加载时显示已存在的记录
        window.onload = function() {
            displayRecords();
        };
    </script>
</head>
<body>
    <h1>统计用户名字和数量</h1>
    <form>
        <label for="username">用户名字:</label>
        <input type="text" id="username" name="username" required>
        <br><br>
        <label for="quantity">数量:</label>
        <input type="number" id="quantity" name="quantity" required>
        <br><br>
        <input type="button" value="提交" onclick="countNames()">
    </form>
    
    <h2>所有记录</h2>
    <table>
        <thead>
            <tr>
                <th>用户名字</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody id="records"></tbody>
    </table>
</body>
</html>

在上述代码中，我们使用了 localStorage 来存储记录。当用户输入用户名字和数量后，我们首先检查输入的有效性，然后从 localStorage 中获取现有的记录。如果记录已存在，我们更新对应的数量；如果记录不存在，我们创建一个新的记录对象并将其添加到列表中。然后，我们将更新后的记录存储回 localStorage。

在显示记录的部分，我们使用 displayRecords 函数来获取 localStorage 中的记录，并将它们在表格中循环显示出来。

请注意，由于这种方法使用 localStorage 来存储数据，数据将保存在浏览器的本地存储中。因此，如果用户清除浏览器缓存或更换浏览器，数据将丢失。对于更持久的存储和处理，您可能需要使用后端技术（如 Servlet 和数据库）来处理数据的存储和处理。

希望这个简单的代码示例可以帮助您在 JSP 页面中实现用户名字输入后统计并显示输入过的用户名字和数量！如果您还有其他问题，请随时提问。