Realize the function
1. Click search, save the searched value into the local record, and display it
2. Search for the same value, to delete the old data, put the new data in the first place of the array
3. Clear the history record
<template>
<view>
<!-- 搜索框 -->
<view class="search">
<view style="display: flex;align-items: center;">
<text class="iconfont icon-sousuo position-absolute text-muted"></text>
<input class="searchInput" v-model="inputValue" @confirm="search" placeholder="搜索" type="text" />
</view>
<view>取消</view>
</view>
<!-- 搜索框 -->
<!-- 搜索历史 -->
<view class="searchHistory">
<view style="display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding: 0px 5px;">
<view>搜索历史:</view>
<view style="color: red;font-size: 28px;" @click="empty">×</view>
</view>
<view class="searchHistoryItem">
<view v-for="(item, index) in searchHistoryList" :key="index">
<text>{
{ item }}</text>
</view>
</view>
</view>
<!-- 搜索历史 -->
</view>
</template>
<script>
export default {
data() {
return {
inputValue: '',
searchHistoryList: [] //搜索出来的内容
};
},
methods: {
search() {
if (this.inputValue == '') {
uni.showModal({
title: '搜索内容不能为空'
});
} else {
if (!this.searchHistoryList.includes(this.inputValue)) {
this.searchHistoryList.unshift(this.inputValue);
uni.setStorage({
key: 'searchList',
data: JSON.stringify(this.searchHistoryList)
});
} else {
//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
let i = this.searchHistoryList.indexOf(this.inputValue);
this.searchHistoryList.splice(i, 1);
this.searchHistoryList.unshift(this.inputValue);
uni.showToast({
title: '不能重复添加'
});
uni.setStorage({
key: 'searchList',
data: JSON.stringify(this.searchHistoryList)
});
}
}
},
//清空历史记录
empty() {
uni.showToast({
title: '已清空'
});
uni.removeStorage({
key: 'searchList'
});
this.searchHistoryList = [];
}
},
async onLoad() {
let list = await uni.getStorage({
key: 'searchList'
});
console.log(list[1].data);
if (list[1].data) {
this.searchHistoryList = JSON.parse(list[1].data);
}
}
};
</script>
<style>
.search {
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0px 15px;
}
.searchInput {
background-color: #f8f9fa;
width: 220px;
margin-left: 5px;
}
.searchHistory {
width: 100%;
margin-top: 5px;
}
.searchHistoryItem {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.searchHistoryItem view {
/* width: 50px; */
height: 20px;
border: 1px solid #eee;
margin: 0px 5px;
}
</style>