jQuery结合localStorage数组值在HTML中添加a标签失效问题：为何a标签未生成且刷新后无法显示值？

嘿，我帮你找出问题啦！你的代码核心问题是页面刷新后没有触发读取 localStorage 并渲染a标签的逻辑——你现在只有在按下回车的keypress事件里才会处理添加a标签的操作，刷新页面后这个事件根本不会触发，所以之前存在localStorage里的内容当然不会显示出来啦。另外还有几个小细节也会影响功能，咱们一起修复：

先看修复后的完整代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

<!-- 搜索输入框 -->
<input type="text" id="Search_Id" placeholder="输入内容按回车保存">

<!-- 用来展示搜索历史的列表 -->
<ul> 
  <li id="story_search" class="span-row"></li> 
</ul>

JavaScript部分 #

// 专门负责渲染搜索历史的函数
function renderSearchHistory() {
  const storageKey = "Search_Text";
  const $targetElement = $("#story_search");
  
  // 先清空现有内容，避免重复渲染
  $targetElement.empty();
  
  // 从localStorage读取已存储的数据
  const storedValues = localStorage.getItem(storageKey);
  if (storedValues) {
    // 拆分、排序后逐个创建a标签
    const valueList = storedValues.split(',').sort();
    valueList.forEach(text => {
      const $link = $('<a>', {
        name: "search_txt",
        class: "txt-search-story",
        href: "#"
      }).append(`<span>${text}</span>`);
      $targetElement.append($link);
    });
  }
}

// 页面加载完成后立即执行的逻辑
$(document).ready(function() {
  // 页面一加载就渲染历史记录，解决刷新后不显示的问题
  renderSearchHistory();
  
  // 监听搜索输入框的回车事件
  $('#Search_Id').keypress(function(event) {
    const keycode = event.keyCode || event.which;
    if (keycode === 13) {
      const storageKey = "Search_Text";
      const inputValue = $(this).val().trim(); // 去除首尾空格，避免存空值
      
      if (inputValue) {
        let valueList = [];
        // 读取已存储的数据
        if (localStorage.getItem(storageKey)) {
          valueList = localStorage.getItem(storageKey).split(',');
          // 检查值是否已存在，避免重复存储
          if (!valueList.includes(inputValue)) {
            valueList.push(inputValue);
            valueList.sort();
            localStorage.setItem(storageKey, valueList.join(','));
          }
        } else {
          // 第一次存储，直接存入
          valueList = [inputValue];
          localStorage.setItem(storageKey, valueList.join(','));
        }
        
        // 重新渲染历史记录，不用刷新页面
        renderSearchHistory();
        // 清空输入框，提升用户体验
        $(this).val('');
      }
    }
  });
});

关键修改点说明 #

1. 新增渲染函数：把读取localStorage并创建a标签的逻辑抽成renderSearchHistory函数，这样页面加载和新增搜索项时都能复用，解决刷新后不显示的核心问题。
2. 页面加载触发渲染：用$(document).ready()在DOM加载完成后立即调用渲染函数，确保刷新页面时自动读取并展示历史记录。
3. 避免重复内容：每次渲染前先清空目标元素，并且添加新值时检查是否已存在，防止重复存储和重复渲染a标签。
4. 优化选择器：直接用$("#story_search")定位目标元素，和你的HTML结构完全匹配，避免原选择器可能找不到元素的问题。
5. 去掉不必要的页面刷新：原代码的location.reload()会导致页面闪跳，现在改为直接调用渲染函数更新DOM，体验更流畅。
6. 处理空值：给输入值加了trim()，避免用户输入空格后存空字符串到localStorage里。

验证一下 #

• 输入内容按回车，能看到a标签立刻出现在页面上
• 刷新页面，之前的搜索项依然会显示
• 输入重复内容，不会重复添加

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