搜索历史应存于 uni.setStorageSync 最稳妥,因其本地、低频、强时效;只存最近10条并去重,键名固定为 search_history;回车或点击即存取,需监听 confirm 和 click 事件;清空时须同步删 storage、更新 data 并 forceUpdate。

搜索历史存到哪里最稳妥?
直接存在 uni.setStorageSync 里,别碰云存储或后端——搜索历史是纯本地、低频读写、强时效性的数据,走同步本地存储最轻量也最可靠。异步的 uni.setStorage 在小程序冷启动时可能还没写完就被读,导致历史“消失”;而用 uniCloud 或接口存,小题大做,还多一层失败风险。
- 只存最近 10 条,用数组 +
Array.from(new Set())去重,避免重复词刷屏 - 键名固定用
search_history,别拼用户 ID 或时间戳——搜索历史不需要隔离,也不需要过期逻辑 - 每次新增前先读一次,删掉旧记录再 unshift 插入,防止数组无限膨胀
怎么让搜索框回车就存、点击就取?
别等「搜索按钮」才触发存取。用户点键盘回车、点软键盘「搜索」键、甚至点击历史项,都该立刻响应。关键在监听 confirm 和 click 两个事件,而不是只绑 bindsubmit 表单。
- 输入框加
confirm-type="search",确保软键盘显示「搜索」键 -
@confirm里调用存历史逻辑,不是只发请求 - 历史项用
@click="onHistoryClick(item)",点击后直接赋值给input的v-model,再自动聚焦并唤起键盘(uni.focusElement不可用,改用uni.createSelectorQuery()+focus())
清空历史为什么有时不生效?
常见原因是没同步更新视图或没清掉缓存副本。你删了 uni.getStorageSync('search_history') 返回的数组,但页面 data 里的 historyList 还是旧引用,UI 不刷新;或者清空后没重置 input 的绑定值,看起来像没清。
- 清空操作必须三步:删 storage → 赋值空数组给 data → 手动触发一次
this.$forceUpdate()(H5/APP 环境下 Vue2 响应式对空数组更新不敏感) - 别用
uni.removeStorageSync('search_history')后就不管了——它只删存储,不联动页面数据 - 如果用了
computed包装历史列表,记得在清空后手动this.historyList = [],否则 getter 仍返回旧值
App 和小程序表现不一致怎么办?
主要卡在键盘行为和 storage 容量。iOS App 下 @confirm 可能不触发,得 fallback 到 @blur;微信小程序对 uni.setStorageSync 单条限制 2MB,但历史记录一般不到 1KB,真正容易爆的是开发者误把整个搜索结果 JSON 存进去。
- iOS App 中,
@confirm失效时加一句@blur="handleBlur",并在里面判断输入值非空且未提交过再补存 - 所有存入前用
JSON.stringify(item).length 过滤超长词(比如用户粘贴了一整段 URL) - 微信小程序真机调试时,storage 清除后要关掉再重开,否则缓存残留——这个坑没法绕,只能提醒用户“重启小程序”
v-for 里用 filter),导致点击历史时数组没变,只是过滤显示——历史得在存的时候就干净,不是在读的时候假装干净。

















