uniapp 前端获取历史搜索记录

场景：搜索页，搜索栏下方的历史搜索

场景分析：每次搜索的关键词都要放到历史搜索里面，首页关键词是要定义的keyname，这个关键词可以放到cookie或者sessionStory里面，我用的uniapp，放到了本地缓存里面，实现方式：

获取搜索词
添加历史搜索
清除历史搜索

获取历史搜索，代码中去掉重复的搜索词

 getHistory(keyname) {let that = thislet words = ''if(uni.getStorageSync(keyname)) { //判断缓存中存没存搜索词words =  JSON.parse(uni.getStorageSync(keyname))}if(!words){return []}for (let i = 0; i < words.length; i++) {if (words[i] == "" || typeof(words[i]) == "undefined" || words[i] == "") {words.splice(i,1)i= i-1}}return words},

添加历史搜索，先从getHistory中取搜索词words，然后看历史搜索词中是否包括关键词（就是自己输入的关键词），没有添加，有了删除，然后再将keyname重新放入storage中。

 addToHistory(keyname , keyword) {let that = thislet words = that.getHistory(keyname)let has = words.includes(keyword)if (!has) {// 数组末尾 删除 ， keyword 数组第一位let length = words.lengthif (length >= maxLength){words.pop()}words.unshift(keyword)uni.setStorageSync(keyname,JSON.stringify(words))}},

清除关键词，从缓存中移除就可以

 clearHistory(keyname) {uni.removeStorageSync(keyname)}

页面中渲染：

首先import上面封装的js
然后再data中定义historySearch：‘’
然后再onshow中去调用
页面中直接v-for循环historySearch

  <view class="search-touch" v-if="historySearch.length"><view class="hot-search"><view class="hot-tit">历史搜索</view><view class="hot-con clearfix"><view class="item" v-for="(item, index) in historySearch" :key="index" @click="goSearch(item)">{{ item }}</view></view></view></view>

  onShow() {//获取历史搜索this.historySearch = getHistory();},

总结：简单的几个方法就直接前端自己处理了历史搜索的问题。

uniapp 前端获取历史搜索记录相关推荐

App开发-使用Vue3+Vant组件实现历史搜索记录功能
使用Vue3+Vant组件实现App历史搜索记录功能最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue ...
uni-app使用setStorageSync存储历史搜索记录，与setStorage区别
一.setStorageSync与setStorage的区别都可以将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容. setStorageSync:同步接口,需要 ...
微信小程序实现历史搜索记录的本地储存和删除
输入框和搜索按钮表单的wxml,没啥特别的,这里绑定了输入框的输入值,样式我就不放上来了 <form class='searchForm' bindsubmit='searchSubmitFn' ...
Android 天气APP（十五）增加城市搜索、历史搜索记录
上一篇:Android 天气APP(十四)修复UI显示异常.优化业务代码逻辑.增加详情天气显示添加城市新版------------------- 一.推荐城市数据二.推荐城市item布局和适配器 ...
Android简单实现搜索功能显示清除历史搜索记录
本文主要为大家分享了Android实现搜索功能,并且可以实时显示搜索的历史记录,根据输入的内容去模糊查询,供大家参考,界面图如下. 本案例实现起来也非常的简单,所以可以直接拿来嵌入项目中使用,主要涉及 ...
Android常用：手把手教你实现搜索框（含历史搜索记录）
http://blog.csdn.net/carson_ho/article/details/53366570 前言像下图的搜索功能在Android开发中非常常见今天我将手把手教大家如何实现具备历 ...
Android开源实战：SearchView搜索框（含历史搜索记录）
前言 Android开发中,类似下图的搜索功能非常常见搜索功能今天,我将手把手教大家实现一款封装了历史搜索记录功能 & 样式的Android 自定义搜索框开源库,希望你们会喜欢. ...
实现历史搜索记录和搜索功能
uniapp实现搜索功能和搜索历史记录 <template><view class="content"><!-- 搜索引擎这里是模糊查询,后续会加上 ...
Android开源实战：简单好用、含历史搜索记录的智能搜索框
前言 Android开发中,类似下图的搜索功能非常常见今天,我将带来一款封装了历史搜索记录功能 & 样式的Android 自定义搜索框开源库,希望你们会喜欢. 已在Github开源: ...
Android原生控件SearchView实现历史搜索记录
SearchView实现搜索记录看了一些大神写的贴子简单实现, 但我们功能需要单独删除一条历史搜索记录,好像没在网上找到解决方案,原生方法上也只有suggestions.clearHistory() ...

uniapp 前端获取历史搜索记录

场景：搜索页，搜索栏下方的历史搜索

uniapp 前端获取历史搜索记录相关推荐

最新文章

热门文章