前端 vue3 处理历史搜索

方法文件

import TaroStorage from "@path/tool/storage";
/**处理历史搜索数据 */
export function storageHistoryKeyWordList(item) {
    
    //输入内容
  const _recentList = TaroStorage.getLocalStorage("historyKeyWordList") || [];
  let _recentSearch = _recentList || [];
  const historyMaxLen = 10;
  const isSelected = _recentSearch.find((val) => val === item);
  if (!isSelected) {
    
    
    _recentSearch.unshift(item);
  } else if (_recentSearch.length > 0) {
    
    
    _recentSearch.map((val, index) => {
    
    
      if (val === item) {
    
    
        _recentSearch.splice(index, 1);
        _recentSearch.unshift(item);
      }
    });
  }
  if (_recentSearch.length > historyMaxLen) {
    
    
    _recentSearch = _recentSearch.slice(0, historyMaxLen);
  }
  TaroStorage.setLocalStorage("historyKeyWordList", _recentSearch);
  return _recentSearch;//历史搜索列表
}
// 搜索数据是否为空
export function isNull(item) {
    
    //输入内容
  if (item == "") return true;
  var regu = "^[ ]+$";
  var re = new RegExp(regu);
  return re.test(item);
}

输入页面调用方法

function onInput(e) {
    
    //确认搜索函数
     if(isNull(e.detail.value)){
    
    
        return;
     }
      filterData.jobName= e.detail.value;
      historyKeyWordList.value = storageHistoryKeyWordList(filterData.jobName);//历史搜索数据列表
    }