如何基于localStorage值过滤JavaScript数组并生成HTML列表？

你的代码核心问题是把localStorage获取的字符串当成了DOM输入框元素，导致无法绑定onkeyup事件，过滤逻辑根本无法触发——要么因为初始调用filterBySearch()时传空值显示完整列表，要么因为localStorage.getItem("nSearch")返回null，给null绑定事件直接报错，导致后续代码不执行，无法显示任何内容。

修正后的完整实现 #

首先确保页面有对应的HTML结构：

<input type="text" id="search-input" placeholder="搜索名字">
<ul id="item-list"></ul>

然后替换JS代码：

// 推荐把数据改成对象数组，避免直接操作HTML字符串，过滤更精准
const itemList = [
  { name: 'Ryan', url: '#' },
  { name: 'Shannon', url: '#' },
  { name: 'Sita', url: '#' },
  { name: 'Greta', url: '#' },
  { name: 'Zack', url: '#' },
  { name: 'Zach', url: '#' },
  { name: 'Alfredo', url: '#' },
  { name: 'Joe', url: '#' },
  { name: 'Jeff', url: '#' },
  { name: 'Cameron', url: '#' },
  { name: 'Kevin', url: '#' },
  { name: 'Kyle', url: '#' },
  { name: 'Ron', url: '#' },
  { name: 'Merriam', url: '#' },
  { name: 'Shane', url: '#' },
  { name: 'Stitch', url: '#' },
];

const itemContainer = document.getElementById("item-list");
const searchInput = document.getElementById("search-input"); // 正确获取输入框DOM元素

// 页面加载时恢复之前的搜索状态
const savedSearch = localStorage.getItem("nSearch");
if (savedSearch) {
  searchInput.value = savedSearch;
  filterBySearch(savedSearch);
} else {
  filterBySearch(); // 无保存值时显示全部
}

// 输入框绑定键盘事件，实时过滤+保存搜索值
searchInput.onkeyup = (event) => {
  const query = event.target.value.trim();
  localStorage.setItem("nSearch", query); // 存到localStorage
  filterBySearch(query);
};

// 生成单个列表项的HTML
const itemHTML = (item) => `<li><a href="${item.url}">${item.name}</a></li>`;

// 过滤并渲染列表
const filterBySearch = (query = "") => {
  let renderHTML = "";
  // 按名字模糊匹配（忽略大小写）
  const filteredItems = itemList.filter(item => 
    item.name.toLowerCase().includes(query.toLowerCase())
  );
  filteredItems.forEach(item => renderHTML += itemHTML(item));
  itemContainer.innerHTML = renderHTML;
};

关键修正点 #

1. 区分DOM元素与存储值：
   不再把localStorage的返回值当成输入框，而是直接获取页面上的输入框DOM元素，才能绑定事件。
2. 恢复搜索状态：
   页面加载时读取localStorage里的历史搜索值，自动填充输入框并执行过滤。
3. 优化数据结构：
   把原来的HTML字符串数组改成对象数组，过滤时只匹配名字，避免误判HTML标签内容，同时代码更易维护。
4. 简化过滤逻辑：
   用includes()替代indexOf()，代码更简洁直观。

如果要保留原HTML字符串数组 #

如果你不想修改itemList的结构，可以修改过滤逻辑，先提取HTML中的文本内容再匹配：

const filterBySearch = (query = "") => {
  let renderHTML = "";
  itemList.forEach((itemHTMLStr) => {
    // 创建临时元素提取文本内容
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = itemHTMLStr;
    const itemName = tempDiv.textContent.trim();
    if (itemName.toLowerCase().includes(query.toLowerCase())) {
      renderHTML += `<li>${itemHTMLStr}</li>`;
    }
  });
  itemContainer.innerHTML = renderHTML;
};

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