實(shí)現(xiàn)功能
1.點(diǎn)擊搜索，把搜索的值存入本地記錄，并展示
2.搜索相同的值，要?jiǎng)h除舊數(shù)據(jù)，把新數(shù)據(jù)放進(jìn)數(shù)組首位
3.清空歷史記錄


<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: [] //搜索出來(lái)的內(nèi)容
};
},
methods: {
search() {
if (this.inputValue == '') {
uni.showModal({
title: '搜索內(nèi)容不能為空'
});
} else {
if (!this.searchHistoryList.includes(this.inputValue)) {
this.searchHistoryList.unshift(this.inputValue);
uni.setStorage({
key: 'searchList',
data: JSON.stringify(this.searchHistoryList)
});
} else {
//有搜索記錄，刪除之前的舊記錄，將新搜索值重新push到數(shù)組首位
let i = this.searchHistoryList.indexOf(this.inputValue);
this.searchHistoryList.splice(i, 1);
this.searchHistoryList.unshift(this.inputValue);
uni.showToast({
title: '不能重復(fù)添加'
});
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>