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

ゞ浴缸里的玫瑰 2023-03-13 06:37 17阅读 0赞

![在这里插入图片描述][20200512154435163.png]  
做一个类似于这样的搜索历史。  
这种类似的，如果数据不多的话可以储存在用户本地，是非常方便的。  
先说下需求：最早搜索的记录（**关键词**）排在最前，并且大于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**

**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;
    	}
    }

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

[20200512154435163.png]: /images/20230312/d5d2ad7194f24d45811df7f2b47398cd.png