使用本地搜索历史（关键词）

做一个类似于这样的搜索历史。
这种类似的，如果数据不多的话可以储存在用户本地，是非常方便的。
先说下需求：最早搜索的记录（关键词）排在最前，并且大于10个的时候，就删除最后一个。输入重复的话不添加。
ps:这边以apicloud框架与vue.js做栗子。
css 样式按照各位的需求 这边简单些一些栗子

.box{
     
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.list{
     
	height:30px;
	padding:0 10px;
	background: #F8F8F8;
	line-height: 30px;
	max-width:160px;
	overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin: 10px 10px 0 0;
    box-sizing: border-box;
    border-radius:3px;   
}

html

<div class="box">
	<div class="list" v-for="(i,index) in list" :key="index">div>
div>

js

data:function(){
     
 	return {
     
        list:[],//搜索历史列表
        keyword:'',//关键词
	}
},
methods:{
     
	search(){
     
		var that=this;
		var keyArr=that.list;
		keyArr.unshift(that.keyword);//往数组最前面添加元素 arr.unshift()向数组的开头添加一个或更多元素
		//ES6去重操作 不懂的小伙伴可以去百度下 而且new Set(Arr) 与 [...new Set(Arr)]效果不一样
		let newKeyArr=[...new Set(keyArr)];
		if(newKeyArr.length>10){
     //当数组大于10个 就去掉最后一个
			newKeyArr.pop();//arr.pop()删除并返回数组的最后一个元素
			$api.setStorage('keyword',newKeyArr);//apicloud的储存本地 与localStorage一样
			that.list=newKeyArr;//赋值  显示搜索历史关键词列表
		}else{
     
			$api.setStorage('keyword',newKeyArr);
			that.list=newKeyArr;
		}
	}
},
mounted(){
     
	var that=this;
	//获取本地搜索历史
    let keywordlist=$api.getStorage('keyword');//获取本地数据 
    if(keywordlist!=undefined){
     //如果有本地储存
		that.list=keywordlist;
	}
}

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！