如何在React JS开发的电商应用中实现用户最近搜索记录保存功能

核心实现逻辑 #

搜索记录采用本地持久化+内存状态双层存储：localStorage 负责页面刷新后数据不丢失，React state 负责实时渲染，避免频繁读取本地缓存。核心规则可根据业务调整：默认最多存10条记录、重复搜索的关键词自动移到最前不重复存储、支持单条删除和全量清空。

步骤1：封装通用搜索历史操作工具函数 #

抽离公共逻辑方便多组件复用：

// src/utils/searchHistory.js
const MAX_HISTORY_LENGTH = 10 // 可自定义最大存储条数
const STORAGE_KEY = 'ECOM_SEARCH_HISTORY'

// 获取本地历史记录
export const getSearchHistory = () => {
  try {
    const history = localStorage.getItem(STORAGE_KEY)
    return history ? JSON.parse(history) : []
  } catch (e) {
    console.error('读取搜索历史失败', e)
    return []
  }
}

// 新增搜索记录
export const addSearchHistory = (keyword) => {
  if (!keyword.trim()) return
  const history = getSearchHistory()
  // 过滤已存在的相同关键词
  const filteredHistory = history.filter(item => item !== keyword.trim())
  // 新关键词插入队首，超出长度截断
  const newHistory = [keyword.trim(), ...filteredHistory].slice(0, MAX_HISTORY_LENGTH)
  localStorage.setItem(STORAGE_KEY, JSON.stringify(newHistory))
  return newHistory
}

// 删除单条记录
export const deleteSearchHistory = (keyword) => {
  const history = getSearchHistory()
  const newHistory = history.filter(item => item !== keyword)
  localStorage.setItem(STORAGE_KEY, JSON.stringify(newHistory))
  return newHistory
}

// 清空全部记录
export const clearSearchHistory = () => {
  localStorage.removeItem(STORAGE_KEY)
  return []
}

步骤2：搜索组件集成示例 #

// src/components/SearchBox.jsx
import { useState, useEffect } from 'react'
import { getSearchHistory, addSearchHistory, deleteSearchHistory, clearSearchHistory } from '@/utils/searchHistory'

const SearchBox = () => {
  const [searchKey, setSearchKey] = useState('')
  const [historyList, setHistoryList] = useState([])

  // 组件初始化读取本地历史
  useEffect(() => {
    setHistoryList(getSearchHistory())
  }, [])

  // 搜索提交逻辑
  const handleSearch = () => {
    if (!searchKey.trim()) return
    // 更新历史记录
    const newHistory = addSearchHistory(searchKey)
    setHistoryList(newHistory)
    // 此处添加你的搜索请求业务逻辑
    // ...
  }

  // 点击历史词条直接填充/搜索
  const handleHistoryItemClick = (keyword) => {
    setSearchKey(keyword)
    // 如需点击直接触发搜索可打开下行注释
    // handleSearch()
  }

  return (
    <div className="search-wrap">
      <div className="search-input-wrap">
        <input
          type="text"
          value={searchKey}
          onChange={(e) => setSearchKey(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
          placeholder="搜索商品"
        />
        <button onClick={handleSearch}>搜索</button>
      </div>

      {/* 历史记录面板 */}
      {historyList.length > 0 && (
        <div className="history-panel">
          <div className="history-header">
            <span>最近搜索</span>
            <button onClick={() => setHistoryList(clearSearchHistory())}>清空全部</button>
          </div>
          <ul className="history-list">
            {historyList.map((item, index) => (
              <li key={index} className="history-item">
                <span onClick={() => handleHistoryItemClick(item)}>{item}</span>
                <button
                  onClick={() => setHistoryList(deleteSearchHistory(item))}
                  className="del-btn"
                >
                  ×
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  )
}

export default SearchBox

可选优化点 #

• 如果需要支持登录用户多端同步，可将localStorage存储替换为后端接口存储用户维度的搜索记录，本地仅做临时缓存
• 可根据业务需求添加关键词大小写统一处理，避免相同含义不同大小写的词被判定为不同记录
• 可给历史词条添加点击埋点，统计高频搜索词用于后续的搜索推荐、热词榜功能
• 可添加点击历史面板外区域自动收起的交互，提升使用体验

内容的提问来源于stack exchange，提问作者momoshiki