学生目录项目：如何搜索Local Storage中表单提交的指定学生信息

这是一个学生目录开发项目，流程为：在某一HTML页面提交学生信息表单，将信息封装为键值对对象并存入数组，再在另一HTML页面展示该数组内容作为学生目录。现需开发独立的搜索页面，实现从Local Storage的学生对象数组中匹配指定lastName值，并在搜索页面展示匹配的学生信息。当前已编写部分JavaScript搜索展示代码及对应HTML结构，需完善代码以实现正确的搜索匹配功能。

当前存在问题的代码 #

JavaScript搜索函数 #

const searchStudents = e => {
    let list = JSON.parse(localStorage.getItem('studentList'));
    var result = document.getElementById('results');
    list.forEach(data => {
        if (document.getElementById('search') == data.lastname) {
            result.innerHTML += `
                            <tr>
                                <td>${data.firstname}</td>
                                <td>${data.lastname}</td>
                                <td>${data.address}</td>
                                <td>${data.city}</td>
                                <td>${data.state}</td>
                                <td>${data.zipcode}</td>
                                <td>${data.email}</td>
                                <td>${data.phone}</td>
                            </tr>
                `;
        }
    })
    e.preventDefault();
}

对应HTML结构 #

<div class="container">
    <form action="search.html" method="GET" onsubmit="searchStudents(event);">
        <p>
            <label>Search: </label>
            <input type="text" name="search" placeholder="Search"/>
        </p>
        <p>
            <input type="submit" value="Search"/>
        </p>    
    </form>
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
                <th>City</th>
                <th>State</th>
                <th>Zip</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody id="results">

        </tbody>
    </table>
    <script src="script.js"></script>
</div>

问题分析与修正方案 #

原代码存在以下核心问题：

1. 未正确获取搜索输入框的值，且输入框缺少id属性，导致匹配逻辑完全失效
2. 搜索结果会叠加在之前的内容上，没有清空操作
3. 匹配逻辑是严格大小写敏感，用户体验差
4. 未处理Local Storage无数据或无匹配结果的情况，易触发报错

修正后的JavaScript代码 #

const searchStudents = e => {
    // 阻止表单默认跳转行为
    e.preventDefault();
    
    // 获取搜索输入框及输入值（需先给输入框添加id="search"）
    const searchInput = document.getElementById('search');
    if (!searchInput) return;
    const targetLastName = searchInput.value.trim().toLowerCase();
    
    // 从LocalStorage取学生列表，处理空数据情况
    const studentList = JSON.parse(localStorage.getItem('studentList')) || [];
    
    // 清空之前的搜索结果
    const resultsContainer = document.getElementById('results');
    resultsContainer.innerHTML = '';
    
    // 过滤匹配的学生（统一转小写实现不区分大小写匹配）
    const matchedStudents = studentList.filter(student => 
        student.lastname?.toLowerCase() === targetLastName
    );
    
    // 渲染结果
    if (matchedStudents.length === 0) {
        resultsContainer.innerHTML = '<tr><td colspan="8">未找到匹配的学生信息</td></tr>';
        return;
    }
    
    matchedStudents.forEach(student => {
        resultsContainer.innerHTML += `
            <tr>
                <td>${student.firstname}</td>
                <td>${student.lastname}</td>
                <td>${student.address}</td>
                <td>${student.city}</td>
                <td>${student.state}</td>
                <td>${student.zipcode}</td>
                <td>${student.email}</td>
                <td>${student.phone}</td>
            </tr>
        `;
    });
}

修正后的HTML输入框部分 #

给输入框添加id属性，确保能正确获取输入值：

<input type="text" id="search" name="search" placeholder="输入姓氏搜索"/>

内容的提问来源于stack exchange，提问作者birchwoody