Web Storage分页搜索异常求助：页面2搜索结果无法更新
2026-5-28
问题分析与修复方案
嘿，我一眼就看出问题出在哪了！咱们一步步来梳理清楚：
问题根源
- 页面2的
mystorage()函数只读取不更新：当你在页面2输入新内容点击Filter时，这个函数只是从sessionStorage里拿旧值，根本没把新输入的内容存进去，自然用的还是之前的过滤条件。 - 点击Filter后没触发过滤逻辑：页面2的Filter按钮只调用了
mystorage()，但负责渲染过滤结果的myfilter()函数没被触发，就算更新了存储，页面也不会重新渲染结果。
修复后的代码
页面1（Index）代码（这部分逻辑没问题，保持原样即可）
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> <h2>My Phonebook</h2> <input type="text" id="autocomplete" placeholder="Search for names.." title="Type in a name"> <button onclick="mystorage(); location.href = './searchresults.html';">Filter</button> <hr> <script> // Check browser support function mystorage() { if (typeof(Storage) !== "undefined") { // Store sessionStorage.setItem("lastname", document.getElementById("autocomplete").value); } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage..."; } } </script> </body> </html>
页面2（Searchresults）修复后的代码
<body onload="initPage();"> <h2>My Phonebook</h2> <input type="text" id="autocomplete" value="" placeholder="Search for names.." title="Type in a name"> <p> Search results for "<span id="result"></span>" </p> <button onclick="handleFilter();"> Filter </button> <hr> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul> <script> // 页面初始化统一处理 function initPage() { if (typeof(Storage) !== "undefined") { const savedValue = sessionStorage.getItem("lastname"); document.getElementById("autocomplete").value = savedValue; document.getElementById("result").innerHTML = savedValue; // 初始化时就执行过滤，确保跳转过来直接显示对应结果 myfilter(); } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage..."; } } // 处理过滤按钮点击逻辑 function handleFilter() { if (typeof(Storage) !== "undefined") { const inputVal = document.getElementById("autocomplete").value; // 先把新的输入值存入sessionStorage sessionStorage.setItem("lastname", inputVal); // 更新页面上显示的搜索关键词 document.getElementById("result").innerHTML = inputVal; // 立即执行过滤逻辑，更新结果 myfilter(); } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage..."; } } function myfilter() { var input, filter, ul, li, a, i; input = document.getElementById("autocomplete"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body>
关键修改点
- 把页面初始化的多个零散函数合并成
initPage()，逻辑更清晰，确保先加载存储的搜索值，再执行过滤渲染。 - 新增
handleFilter()函数替代原来的mystorage()，现在点击Filter时会完整执行：- 获取当前输入框的新值
- 更新sessionStorage里的存储内容
- 更新页面上显示的搜索关键词
- 立即调用
myfilter()重新过滤并渲染结果
- 去掉了冗余的判断逻辑，让代码更简洁易维护。
现在再测试一下，不管是从页面1跳转过来，还是在页面2直接修改搜索内容点击Filter，结果都会正确更新啦！
内容的提问来源于stack exchange，提问作者Reginald1234
