<div class="historydata" v-show="input">
<div>历史搜索</div>
<ul class="">
<li v-for="(item, index) in historyList" :key="index" class="text">
{{ item }}
</li>
</ul>
</div>
mounted() {
if (JSON.parse(localStorage.getItem("historyList"))) {
this.historyList = JSON.parse(localStorage.getItem("historyList"));
}
},
点击搜索调下边这个方法
hostoryfilter(){
if (this.input == "") {
// this.$toast('请输入搜索内容');
return false;
} else {
// 没有搜索记录，把搜索值push进数组首位，存入本地
if (!this.historyList.includes(this.input)) {
this.historyList.unshift(this.input);
localStorage.setItem("historyList", JSON.stringify(this.historyList));
} else {
//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
let i = this.historyList.indexOf(this.input);
this.historyList.splice(i, 1);
this.historyList.unshift(this.input);
localStorage.setItem("historyList", JSON.stringify(this.historyList));
}
if(this.historyList.length == 50){
this.historyList = []
}
}文章来源：https://www.toymoban.com/news/detail-456970.html
},文章来源地址https://www.toymoban.com/news/detail-456970.html
到了这里，关于前端如何实现搜索记录展示以及清楚历史搜索记录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![【NLP】什么是语义搜索以及如何实现 [Python、BERT、Elasticsearch]](https://imgs.yssmx.com/Uploads/2024/02/758660-1.jpeg)
