微信小程序实现历史搜索功能

实现样式

实现原理

该功能通过将数据存入localstorage实现

export default {
	data() {
		return {
			historyList: [],//历史记录
            showHistory: true,//是否展示历史记录
        }
    }
}

主要是微信为开发者提供的wx.setStorageSync(string key, any data)方法将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

wx.setStorageSync('search_history', JSON.stringify(this.historyList));//储存历史记录

清空所有历史

clearHistory() {
   this.historyList=[]; //this.setData({historyList:[]})也可以
   wx.removeStorageSync('search_history')
 },

微信小程序中将数据存在storage中，除非用户手动触发，否则不会过期，同理，若想在浏览器中实现，只需将数据存在localStorage中即可。

注意：storage 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。

searchIt(){
    if (this.historyList.indexOf(this.searchText) == -1) {//新增
	    if (this.historyList.length == 15) {//控制上限
            //如果已经存在十五条数据，删除最久没搜索过那条
	        this.historyList.splice(this.historyList.length - 1, 1);
	    }
	    this.historyList.unshift(this.searchText);
    } else {//如果之前搜索过，换位，插入到第一位
	    let index = this.historyList.indexOf(this.searchText);
    	this.historyList.splice(index, 1);//删除原先位置的元素
	    this.historyList.unshift(this.searchText);//置顶新元素
    }
    wx.setStorageSync('search_history', JSON.stringify(this.historyList));//储存历史记录
}

 清除/选择 一条搜索历史

//删除一条历史记录
killOneHis(idx){
	this.historyList.splice(idx,1);
},
//选择一条点击搜索
chooseOneHis(str){
	this.searchText=str;
	let idx=this.historyList.indexOf(str);
	this.historyList.splice(idx, 1);
	this.historyList.unshift(str);
	this.searchProductList=[];
	this.seachIt();
},

获取搜索历史

onShow() {
	if (wx.getStorageSync('search_history')) {
		this.historyList = JSON.parse(wx.getStorageSync('search_history'));
	}
}

html

<!-- 搜索 -->
		<view class="inputTop">
			<input v-model="searchText" class="inputTop-open" type="text" placeholder="可搜索产区/品种" @focus="showAllHistory" focus="showHistory" />
			<image @click="seachIt" class="input-button" src="https://cdn.sommcat.com/images/start-button-icon.png"></image>
		</view>
		<!-- 历史记录 -->
		<view v-if="showHistory" style="min-height: 90vh;background-color: #ffffff;">
			<view style="text-align: center;color:#BEBEBE ;font-size: 24rpx;margin:40rpx;">- 搜索历史 -</view>
			<view style="display:flex;justify-content: center;flex-wrap: wrap;margin:0 100rpx;" v-if="historyList.length>0">
				<view v-for="(his,idx) in historyList" :key="idx">
					<view @click="chooseOneHis(his)" class="hisT">
						<view style="margin-right:10rpx;">{{his}}</view>
						<view @click.stop="killOneHis(idx)">X</view>
					</view>
				</view>
			</view>
		</view>