localstorage保存搜索词的核心是：每次搜索后将去重、置顶、限10条的关键词数组存入，刷新不丢失；读取时解析渲染为可点击历史项，并支持清空。
用 localStorage 保存用户最近搜索的关键词，核心是：每次搜索后把关键词存入数组，限制数量（比如最多10条），去重，并同步写入本地存储。它不依赖服务器，刷新页面也不丢失，适合轻量级搜索历史功能。
一、保存搜索词到 localStorage
每次用户提交搜索（比如点击搜索按钮或回车），获取输入框的值，然后执行以下逻辑：
- 从
localStorage读取已有的历史数组（如键名为searchHistory），若无则初始化为空数组 - 去掉首尾空格，过滤掉空字符串或纯空白
- 如果该词已存在，先从数组中移除（保证最新搜索排在最前）
- 用
unshift()插入到数组开头 - 用
splice(10)截取前10项，保持数量上限 - 用
JSON.stringify()转为字符串，再调用localStorage.setItem()写入
二、读取并渲染搜索历史
页面加载或聚焦搜索框时，可展示最近搜索词供用户快速选择：
- 用
localStorage.getItem('searchHistory')获取字符串 - 用
JSON.parse()转回数组（注意加try...catch防止解析失败） - 遍历数组，动态生成
<li>或按钮，绑定点击事件（点击即填入搜索框并触发搜索） - 可添加“清空历史”按钮，调用
localStorage.removeItem('searchHistory')
三、注意事项与优化点
大小限制：每个域名下 localStorage 通常约 5–10MB，但单个 key 的值不宜过大；10 条短关键词完全无压力。
同源限制：仅当前协议+域名+端口可访问，https://a.com 和 http://a.com 互不可见。
字符编码：中文直接支持，无需额外处理。
隐私考虑：敏感词（如含手机号、邮箱）建议不缓存，或增加白名单过滤逻辑。
兼容性：IE8+ 支持，现代浏览器均无问题。
四、一个最小可用示例代码
HTML 中放一个搜索框和一个历史列表容器：
<input type="text" id="searchInput" placeholder="输入关键词"><button id="searchBtn">搜索</button>
<div id="historyList"></div>
<script>
const input = document.getElementById('searchInput');
const btn = document.getElementById('searchBtn');
const list = document.getElementById('historyList');
function loadHistory() {
try {
const json = localStorage.getItem('searchHistory');
return json ? JSON.parse(json) : [];
} catch (e) {
return [];
}
}
function saveHistory(keyword) {
if (!keyword || !keyword.trim()) return;
let arr = loadHistory();
const clean = keyword.trim();
// 移除已存在的旧记录
arr = arr.filter(k => k !== clean);
arr.unshift(clean);
arr.splice(10); // 保留最多10条
localStorage.setItem('searchHistory', JSON.stringify(arr));
}
function renderHistory() {
const arr = loadHistory();
list.innerHTML = arr.length
? '<h4>最近搜索<ul>' +
arr.map(k => `<li><button onclick="search('${k}')">${k}`).join('') +
''
: '';
}
function search(keyword) {
input.value = keyword;
// 这里可触发实际搜索逻辑，比如 submit 表单或调 API
}
btn.addEventListener('click', () => {
saveHistory(input.value);
renderHistory();
});
input.addEventListener('keypress', e => {
if (e.key === 'Enter') {
saveHistory(input.value);
renderHistory();
}
});
renderHistory(); // 页面加载时显示历史
</script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
