微信小程序一个搜索记录保存本地，并且记录去重复排序小demo - 好文

先看上面是效果图，下面开始贴代码。

html：
<view class="SearchBox"> <view class="Search_input_top_box"> <view
class="Search_ico_box"> <image class="Search_ico"
src="../../images/[email protected]"></image> </view> <input
class="Search_Input" focus="{{name_focus}}" placeholder='请输入商品、品牌名称进行搜索'
bindinput='inputvalue' value="{{input_value}}"></input> <view
class="Search_btn" bindtap='search'>{{SearchText}}</view> </view> <view
class="Search_xian"></view>  <view class="Search_record_box">
<view class="Search_record_text"> <text>搜索记录</text> <image
bindtap='delete_list' src='../../images/[email protected]'></image>
</view>  <view class="History_box"> <view class="History-list">
<text wx:for="{{listarr}}" data-text="{{item}}" wx:key="key"
bindtap='this_value'>{{item}}</text> </view> </view> </view> 
<view class="hot_box"> <view class="hot_box_text"> <text>热门搜索</text> </view>
 <view class="History_box"> <view class="History-list"> <text
wx:for="{{hostarr}}" data-text="{{item}}" wx:key="key"
bindtap='this_value'>{{item}}</text> </view> </view> </view> </view>
css：
/* pages/search/search.wxss */ page { background: #ffffff; }
.Search_input_top_box { margin-top: 12rpx; position: relative; margin-bottom:
16rpx; } .Search_Input { width: 600rpx; height: 58rpx; border-radius: 5px;
background: #ececec; margin-left: 20rpx; display: inline-block; vertical-align:
middle; padding-left: 58rpx; box-sizing: border-box; font-size: 28rpx; color:
#393939; } .Search_btn { display: inline-block; width: 130rpx; height: 58rpx;
font-size: 30rpx; color: #393939; /* margin-top: 18rpx; */ vertical-align:
middle; line-height: 58rpx; text-align: center; } .Search_ico { width: 100%;
height: 100%; } .Search_ico_box { position: absolute; left: 40rpx; top: 5rpx;
width: 23rpx; height: 28rpx; z-index: 999; } .Search_xian { width: 100%;
height: 1rpx; background: #dcdcdc; margin-bottom: 32rpx; }
.Search_record_text>text { font-size: 28rpx; color: #898989; margin-left:
20rpx; } .hot_box_text>text { font-size: 28rpx; color: #898989; margin-left:
20rpx; } .hot_box_text { margin-top: 40rpx; } .Search_record_text>image {
width: 44rpx; height: 44rpx; vertical-align: middle; float: right;
margin-right: 20rpx; } .History-list { margin-left: 20rpx; margin-top: 28rpx;
margin-right: 20rpx; } .History-list>text { display: inline-block; height:
56rpx; border-radius: 5px; background: #f5f5f5; max-width: 100%; padding-left:
24rpx; padding-right: 24rpx; line-height: 56rpx; font-size: 26rpx; color:
#393939; margin-bottom: 20rpx; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; box-sizing: border-box; margin-right: 20rpx; }
js：
Page({ /** * 页面的初始数据 */ data: { inpuVal: "",//input框内值 listarr: [],//创建数组
SearchText: '取消',//按钮变动值 keydown_number: 0,//检测input框内是否有内容 input_value:
"",//value值 hostarr: [],//热门搜索接收请求存储数组 name_focus:true//获取焦点 },
//取值input判断输入框内容修改按钮 inputvalue: function (e) { this.setData({ inputVal:
e.detail.value }) if (e.detail.cursor != 0) { this.setData({ SearchText: "搜索",
keydown_number: 1 }) } else { this.setData({ SearchText: "取消", keydown_number:
0 }) } }, //搜索方法 search: function () { if (this.data.keydown_number == 1) { let
This = this; //把获取的input值插入数组里面 let arr = this.data.listarr;
console.log(this.data.inputVal) console.log(this.data.input_value)
//判断取值是手动输入还是点击赋值 if (this.data.input_value == ""){ // console.log('进来第er个') //
判断数组中是否已存在 let arrnum = arr.indexOf(this.data.inputVal);
console.log(arr.indexOf(this.data.inputVal)); if (arrnum != -1) { //
删除已存在后重新插入至数组 arr.splice(arrnum,1) arr.unshift(this.data.inputVal); }else{
arr.unshift(this.data.inputVal); } } else { console.log('进来第一个') let arr_num =
arr.indexOf(this.data.input_value);
console.log(arr.indexOf(this.data.input_value)); if (arr_num != -1) {
arr.splice(arr_num, 1) arr.unshift(this.data.input_value); } else {
arr.unshift(this.data.input_value); } } console.log(arr) //存储搜索记录
wx.setStorage({ key: "list_arr", data: arr }) //取出搜索记录 wx.getStorage({ key:
'list_arr', success: function (res) { This.setData({ listarr: res.data }) } })
this.setData({ input_value: '', }) } else { console.log("取消") } }, //清除搜索记录
delete_list: function () { //清除当前数据 this.setData({ listarr: [] }); //清除缓存数据
wx.removeStorage({ key: 'list_arr' }) }, //点击赋值到input框 this_value:function(e){
this.setData({ name_focus: true }) let value = e.currentTarget.dataset.text;
this.setData({ input_value:value, SearchText: "搜索", keydown_number: 1 }) }, /**
* 生命周期函数--监听页面加载 */ onLoad: function (options) { let This = this; //设置当前页标题
wx.setNavigationBarTitle({ title: '搜索' }); //读取缓存历史搜索记录 wx.getStorage({ key:
'list_arr', success: function (res) { This.setData({ listarr: res.data }) } })
//请求热门搜索 wx.request({ url: 'http://192.168.1.222:8081/StaticPage/list.json',
//仅为示例，并非真实的接口地址 method: 'GET', data: {}, success: function (res) {
This.setData({ hostarr: res.data.History }) }, fail: function (err) {
console.log(err) } }) }, ）}

热门工具换一换