如何使用HTML5中LocalStorage记录用户最后一次在搜索框选择的分类项-H5教程-PHP中文网

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

如何使用html5中localstorage记录用户最后一次在搜索框选择的分类项

可以直接用 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></select>），监听 change 事件，取 select.value 保存即可

页面加载时恢复上次选择

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

html-to-pptx-converter

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

下载

读取：const last = localStorage.getItem('lastSelectedCategory');
若存在且匹配，设置搜索框关联的 UI 状态：比如给对应按钮加 active 类，或设置 <select></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);