可直接用 localStorage.setItem() 保存用户选中的分类项，并在页面加载时用 getItem() 读取并设为默认值或高亮状态；点击按钮或下拉选择时存入键 lastSelectedCategory，加载时匹配激活对应 UI 元素或提交时注入参数。

可以直接用 localStorage.setItem() 保存用户选中的分类项，再在页面加载时用 localStorage.getItem() 读取并自动设为搜索框的默认值或高亮状态。

保存分类选择（例如点击分类按钮时）

当用户点击某个分类（如“手机”、“电脑”、“配件”），触发事件后立即将其存入 localStorage：

• 给每个分类元素添加点击监听，比如：<button class="category" data-value="mobile">手机</button>
• JavaScript 中获取点击值并保存：
  

  document.querySelectorAll('.category').forEach(btn => {<br>
        btn.addEventListener('click', () => {<br>
          const category = btn.dataset.value;<br>
          localStorage.setItem('lastSelectedCategory', category);<br>
        });<br>
      });

• 如果分类通过下拉选择（<select>），监听 change 事件，取 select.value 保存即可

页面加载时恢复上次选择

在 DOM 加载完成后（如 DOMContentLoaded 或直接放在 <script> 底部），读取并应用该值：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 读取：const last = localStorage.getItem('lastSelectedCategory');
• 若存在且匹配，设置搜索框关联的 UI 状态：比如给对应按钮加 active 类，或设置 <select> 的 value 和 selectedIndex
• 示例（激活按钮）：
  

  if (last) {<br>
        document.querySelector(`.category[data-value="${last}"]`)?.classList.add('active');<br>
      }

配合搜索表单使用（可选增强）

如果搜索框本身是 <input type="search"> 并带分类筛选，可将分类作为隐藏字段或 URL 参数的一部分。但更轻量的做法是：

立即学习“前端免费学习笔记（深入）”；

• 提交前从 localStorage 读取 lastSelectedCategory，拼入请求参数（如 fetch('/search?q=xxx&cat=mobile')）
• 或在表单提交时动态插入一个隐藏域：
  

  const hiddenCat = document.createElement('input');<br>
      hiddenCat.type = 'hidden';<br>
      hiddenCat.name = 'category';<br>
      hiddenCat.value = last || '';<br>
      form.appendChild(hiddenCat);

注意清理与兼容性

localStorage 是同源、字符串键值对存储，需注意：

• 值必须是字符串 —— 若需存对象，先 JSON.stringify()，读取时 JSON.parse()
• 用户清除浏览器数据或隐身模式下会丢失，适合非关键偏好
• 建议加简单错误处理，比如 try/catch 包裹 setItem（防止配额超限）
• 不支持过期时间，如需时效控制，可额外存一个时间戳，读取时判断是否过期