vue搜索、历史记录功能简单实现

实现的功能
1.点击搜索,把搜索的值存入本地记录,并展示
2.搜索相同的值,要删除旧数据,把新数据放进数组首位
3.清空历史记录

<div class="srarch_main">
	<img src="@img/icon/4.png" alt="删除历史记录" class="del" @click="empty">
	<div class="title">历史搜索</div>
	<ul>
		<li v-for="(item,index) in historyList" :key="index" @click="goSearchDetail(item)">{{item}}</li>
	</ul>
</div>
<script>
export default {
    data() {
        return {
            search_val: '', //搜索的内容
            historyList: [] //历史搜索记录,存本地
        }
    },
    mounted() {
        //如果本地存储的数据historyList有值,直接赋值给data中的historyList
        if (JSON.parse(localStorage.getItem("historyList"))) {
            this.historyList = JSON.parse(localStorage.getItem("historyList"));
        }
    },
    methods: {
        // 搜索
        get_search(){
        	if(this.search_val == ''){
        		this.$toast('请输入搜索内容');
        		return false;
        	}else{
                // 没有搜索记录,把搜索值push进数组首位,存入本地
                if (!this.historyList.includes(this.search_val)) {
                  this.historyList.unshift(this.search_val);
                  localStorage.setItem("historyList", JSON.stringify(this.historyList));
                }else{
                    //有搜索记录,删除之前的旧记录,将新搜索值重新push到数组首位
                    let i =this.historyList.indexOf(this.search_val);
                    this.historyList.splice(i,1)
                    this.historyList.unshift(this.search_val);
                    localStorage.setItem("historyList", JSON.stringify(this.historyList));
                }
                //跳转到搜索结果页
        		this.$router.push({
        			path: "/list", 
        			query: { 
        				search_val: this.search_val,
        			},
        		});
        	}
        },
        
        //点击历史搜索,跳转搜索结果页
        goSearchDetail(title){
        	this.$router.push({
        		path: "/list", 
        		query: { 
        			search_val: title,
        		},
        	});
        },
        
        //清空历史搜索记录
        empty(){
        	this.$toast.success('清空历史搜索成功');
            localStorage.removeItem('historyList');
            this.historyList = [];
        }
    },
}
</script>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值