第十八章搜索历史保存功能实现记录

🎯 功能目标

为微信小程序"我的统计"页面（index）增加搜索历史保存功能，记录用户搜索过的关键词，提升重复搜索效率。

核心特性

✅ 自动保存搜索关键词（最多10条）
✅ 展示搜索历史列表
✅ 点击历史记录快速搜索
✅ 支持删除单条历史
✅ 支持清空全部历史
✅ 使用微信小程序 Storage 本地存储

🏗️ 技术方案

整体架构

复制代码

用户执行搜索
    ↓
搜索成功
    ↓
保存到本地存储 (wx.setStorageSync)
    ↓
更新历史记录列表
    ↓
展示在搜索框下方

用户点击历史记录
    ↓
触发搜索
    ↓
展示搜索结果

技术选型

层级	技术	说明
数据存储	微信小程序 Storage	本地持久化，性能优异
数据结构	Array	简单数组，最多10条
去重算法	filter + unshift	移除旧的，添加新的到头部
UI 展示	Flex 布局	标签式展示，响应式换行
交互反馈	Toast + Modal	删除提示、清空确认

💻 实现过程

第一阶段：数据结构调整

1. 新增数据字段

文件 : index.js

javascript 复制代码

data: {
  // ... 原有字段
  
  // 搜索历史相关字段
  searchHistory: []       // 搜索历史列表
}

关键点:

初始值为空数组
页面加载时从 Storage 读取
每次增删改后更新

第二阶段：核心方法实现

2. saveSearchHistory 方法（保存历史）

文件 : index.js

javascript 复制代码

/**
 * 保存搜索关键词到历史记录
 * @param {string} keyword - 搜索关键词
 */
saveSearchHistory(keyword) {
  if (!keyword || !keyword.trim()) {
    return;
  }
  
  const trimmedKeyword = keyword.trim();
  
  // 读取现有历史
  let history = wx.getStorageSync('vote_search_history') || [];
  
  // 去重：移除已存在的相同关键词
  history = history.filter(item => item !== trimmedKeyword);
  
  // 添加到最前面
  history.unshift(trimmedKeyword);
  
  // 限制最多10条
  if (history.length > 10) {
    history = history.slice(0, 10);
  }
  
  // 保存到本地存储
  wx.setStorageSync('vote_search_history', history);
  
  // 更新页面数据
  this.setData({ searchHistory: history });
}

技术要点:

空值检查: 空关键词不保存
去重逻辑: 先 filter 移除旧的，再 unshift 添加新的
数量限制: 超过10条用 slice 截断
同步存储: 使用 setStorageSync，避免异步复杂性
UI 更新: 立即 setData 刷新界面

调用时机 : 在 performSearch 成功后调用

3. loadSearchHistory 方法（加载历史）

文件 : index.js

javascript 复制代码

/**
 * 从本地存储加载搜索历史
 */
loadSearchHistory() {
  const history = wx.getStorageSync('vote_search_history') || [];
  this.setData({ searchHistory: history });
}

调用时机 : 页面 onShow 时调用

优点:

每次进入页面都加载最新数据
首次使用返回空数组，不会报错

4. deleteHistoryItem 方法（删除单条）

文件 : index.js

javascript 复制代码

/**
 * 删除单条搜索历史
 * @param {object} e - 事件对象
 */
onDeleteHistoryItem(e) {
  const index = e.currentTarget.dataset.index;
  const history = [...this.data.searchHistory];
  history.splice(index, 1);
  
  // 更新存储
  wx.setStorageSync('vote_search_history', history);
  
  // 更新页面
  this.setData({ searchHistory: history });
  
  wx.showToast({ 
    title: '已删除', 
    icon: 'success',
    duration: 1000
  });
}

交互设计:

不需要二次确认（用户体验更好）
立即更新 UI 和存储
Toast 提示友好

5. clearAllHistory 方法（清空全部）

文件 : index.js

javascript 复制代码

/**
 * 清空所有搜索历史
 */
clearAllHistory() {
  wx.showModal({
    title: '确认清空',
    content: '确定要清空所有搜索历史吗？',
    success: (res) => {
      if (res.confirm) {
        wx.removeStorageSync('vote_search_history');
        this.setData({ searchHistory: [] });
        
        wx.showToast({ 
          title: '已清空', 
          icon: 'success' 
        });
      }
    }
  });
}

交互设计:

二次确认防止误操作
使用 removeStorageSync 彻底清除
清空后隐藏历史记录区域

6. onHistoryItemClick 方法（点击搜索）

文件 : index.js

javascript 复制代码

/**
 * 点击历史记录触发搜索
 * @param {object} e - 事件对象
 */
onHistoryItemClick(e) {
  const keyword = e.currentTarget.dataset.keyword;
  
  // 设置搜索框内容
  this.setData({ searchKeyword: keyword });
  
  // 执行搜索
  this.performSearch(keyword);
}

流程:

获取点击的关键词
填充搜索框
触发搜索
自动更新历史顺序（saveSearchHistory 会处理）

第三阶段：集成到现有流程

7. 修改 performSearch 方法

文件 : index.js

在搜索成功后调用 saveSearchHistory:

javascript 复制代码

performSearch(keyword) {
  // ... 原有代码
  
  success: res => {
    if (res.data && res.data.code === 200) {
      // ... 原有代码
      
      // 保存搜索历史
      this.saveSearchHistory(keyword);
    }
  }
}

目的: 确保只有搜索成功才保存历史

8. 修改 onShow 方法

文件 : index.js

javascript 复制代码

onShow() {
  this.loadSearchHistory();  // 加载搜索历史
  this.loadFirstPage();
  // ... 原有代码
}

目的: 每次进入页面都加载最新历史

第四阶段：UI 实现

9. WXML 结构

文件 : index.wxml

在搜索框下方增加历史记录区域：

xml 复制代码

<!-- 搜索历史 -->
<view wx:if="{{searchHistory.length > 0}}" class="search-history">
  <view class="history-header">
    <text class="history-title">搜索历史</text>
    <text class="history-clear" bindtap="clearAllHistory">清空历史</text>
  </view>
  
  <view class="history-list">
    <view 
      class="history-item" 
      wx:for="{{searchHistory}}" 
      wx:key="*this"
      bindtap="onHistoryItemClick"
      data-keyword="{{item}}"
    >
      <text class="history-text">{{item}}</text>
      <view 
        class="history-delete" 
        catchtap="onDeleteHistoryItem"
        data-index="{{index}}"
      >
        <text>✕</text>
      </view>
    </view>
  </view>
</view>

设计亮点:

条件渲染 : 只在有历史时显示（wx:if）
列表循环 : wx:for 遍历历史数组
事件绑定 :
- 外层 bindtap 触发搜索
- 内层 catchtap 阻止冒泡，删除单条
数据传递 :
- data-keyword 传递关键词
- data-index 传递索引

10. WXSS 样式

文件 : index.wxss

css 复制代码

/* 搜索历史 */
.search-history {
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.history-title {
  font-size: 26rpx;
  color: #999;
}

.history-clear {
  font-size: 24rpx;
  color: #ff4d4f;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  background: #f5f5f5;
  border-radius: 32rpx;
  max-width: 100%;
}

.history-text {
  font-size: 26rpx;
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-delete {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8rpx;
  color: #999;
  font-size: 20rpx;
}

.history-delete:active {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

设计原则:

标签式设计: 圆角背景，类似微信搜索历史
Flex 布局: 自动换行，适应不同屏幕
文本溢出: 超长关键词显示省略号
交互反馈: 删除按钮点击有高亮效果
视觉层次: 标题灰色，清空红色，层次分明

🧪 测试验证

功能测试

测试场景	操作步骤	预期结果	状态
保存历史	搜索"聚餐"	历史记录显示"聚餐"	✅
去重	再次搜索"聚餐"	"聚餐"移到第一位	✅
限制10条	搜索11个不同词	只显示最近10条	✅
点击历史	点击"聚餐"	触发搜索，显示结果	✅
删除单条	点击 ✕ 按钮	该条消失，Toast提示	✅
清空全部	点击"清空历史"	二次确认后清空	✅
页面刷新	退出再进入	历史记录依然存在	✅
空关键词	输入空格搜索	不保存历史	✅
特殊字符	搜索"聚餐&庆祝"	正常保存和显示	✅
首次使用	新用户进入	不显示历史区域	✅

性能测试

指标	目标值	实际值	状态
保存耗时	< 10ms	~5ms	✅
加载耗时	< 10ms	~3ms	✅
UI 更新	流畅	无卡顿	✅
存储占用	< 1KB	~500B	✅

⚠️ 踩坑记录

问题1: 事件冒泡导致误触发

现象: 点击删除按钮时，同时触发了搜索

原因: 删除按钮的点击事件冒泡到外层

解决 : 使用 catchtap 代替 bindtap

xml 复制代码

<!-- ❌ 错误 -->
<view bindtap="onDeleteHistoryItem">

<!-- ✅ 正确 -->
<view catchtap="onDeleteHistoryItem">

问题2: 历史记录顺序不正确

现象: 重复搜索同一关键词，没有移到最前面

原因: 只做了 unshift，没有先 filter 去重

解决: 先 filter 移除旧的，再 unshift 添加新的

javascript 复制代码

// ❌ 错误
history.unshift(keyword);

// ✅ 正确
history = history.filter(item => item !== keyword);
history.unshift(keyword);

问题3: 首次使用报错

现象: 新用户首次进入页面，控制台报错

原因 : wx.getStorageSync 返回 undefined

解决: 提供默认值空数组

javascript 复制代码

// ❌ 错误
const history = wx.getStorageSync('vote_search_history');

// ✅ 正确
const history = wx.getStorageSync('vote_search_history') || [];

🎓 技术要点总结

微信小程序 Storage API

同步 vs 异步

javascript 复制代码

// 同步（推荐，简单可靠）
wx.setStorageSync('key', value);
wx.getStorageSync('key');
wx.removeStorageSync('key');

// 异步（复杂场景）
wx.setStorage({ key: 'key', data: value });
wx.getStorage({ key: 'key', success: ... });

存储限制
- 单个 key 最大 1MB
- 总存储最大 10MB
- 我们的数据远小于限制
生命周期
- 存储在本地，小程序卸载后清除
- 用户手动清除缓存也会清除
- 不会跨设备同步

数组操作技巧

去重并添加到头部

javascript 复制代码

history = history.filter(item => item !== keyword);
history.unshift(keyword);

限制数组长度

javascript 复制代码

if (history.length > 10) {
  history = history.slice(0, 10);
}

根据索引删除

javascript 复制代码

const history = [...this.data.searchHistory];  // 浅拷贝
history.splice(index, 1);

事件处理最佳实践

阻止冒泡

xml 复制代码

<!-- 内层事件使用 catchtap -->
<view bindtap="outerHandler">
  <view catchtap="innerHandler">...</view>
</view>

传递数据

xml 复制代码

<view data-keyword="{{item}}" data-index="{{index}}">

javascript 复制代码

const keyword = e.currentTarget.dataset.keyword;
const index = e.currentTarget.dataset.index;

第十八章 搜索历史保存功能实现记录

🎯 功能目标

核心特性

🏗️ 技术方案

整体架构

技术选型

💻 实现过程

第一阶段：数据结构调整

1. 新增数据字段

第二阶段：核心方法实现

2. saveSearchHistory 方法（保存历史）

3. loadSearchHistory 方法（加载历史）

4. deleteHistoryItem 方法（删除单条）

5. clearAllHistory 方法（清空全部）

6. onHistoryItemClick 方法（点击搜索）

第三阶段：集成到现有流程

7. 修改 performSearch 方法

8. 修改 onShow 方法

第四阶段：UI 实现

9. WXML 结构

10. WXSS 样式

🧪 测试验证

功能测试

性能测试

⚠️ 踩坑记录

问题1: 事件冒泡导致误触发

问题2: 历史记录顺序不正确

问题3: 首次使用报错

🎓 技术要点总结

微信小程序 Storage API

数组操作技巧

事件处理最佳实践

第十八章搜索历史保存功能实现记录