三十八 搜索词记录，数组去重，排序，进行本地存储的读取展示

完整代码：

<template>
        <view>
                <Lines />
                <view class="search-item">
                        <view class="search-title">
                                <view class="f-colo">
                                        最近搜索
                                </view>
                                <view class="iconfont icon-lajitong">
                                </view>
                        </view>
                        <view v-if="searchData.length > 0">
                                <view class="search-name f-colo" v-for="(item,index) in searchData" :key="index">
                                        {{item}}
                                </view>
                        </view>
                        <view v-else class="search-end">暂无搜索记录</view>
                </view>
                <view class="search-item">
                        <view class="search-title">
                                <view class="f-colo">
                                        热门搜索
                                </view>
                        </view>
                        <view>
                                <view class="search-name f-colo">
                                        四件套
                                </view>
                                <view class="search-name f-colo">
                                        内衣
                                </view>
                        </view>
                </view>
        </view>
</template>

<script>
        import Lines from "@/components/common/lines.vue"
        export default {
                data() {
                        return {
                                // 输入的关键词
                                keyword: '',
                                // 搜索过的词
                                searchData: []
                        }
                },
                // 页面加载的时候， 获取本地存储数据==》最近搜索过的关键词
                onLoad() {
                        uni.getStorage({
                                key: 'searchData',
                                success: (res) => {
                                        this.searchData = JSON.parse(res.data)
                                }
                        });
                },
                // 标题栏右侧 搜索按钮点击
                onNavigationBarButtonTap() {
                        this.search()
                },
                // 监听input输入内容的
                onNavigationBarSearchInputChanged(e) {
                        this.keyword = e.text
                },
                // 监听软键盘上搜索按钮的
                onNavigationBarSearchInputConfirmed(e) {
                        this.search()
                },
                components: {
                        Lines
                },
                methods: {
                        // 判断关键词是否为空
                        search() {
                                if (this.keyword === "") {
                                        return uni.showToast({
                                                title: '关键词不能为空',
                                                icon: "none"
                                        })
                                } else {
                                        uni.navigateTo({
                                                url: '../search-list/search-list'
                                        })
                                }
                                // 隐藏软键盘
                                uni.hideKeyboard();
                                // 调用最近搜索词的方法
                                this.addSearch();
                        },
                        // 记录最近的搜索词
                        addSearch() {
                                let key = this.searchData.indexOf(this.keyword)
                                if (!key) {
                                        this.searchData.unshift(this.keyword)
                                } else {
                                        // 如果已经存在，就先删了已有的，再添加 
                                        // splice方法经典使用： 返回删除元素的数组，并取出第一个元素来使用
                                        this.searchData.unshift(this.searchData.splice(key, 1)[0])
                                }

                                // 将数据存储到本地
                                uni.setStorage({
                                        key: "searchData",
                                        data: JSON.stringify(this.searchData)
                                })
                        }
                }
        }
</script>

<style>
        .search-item {
                margin: 20rpx;
        }

        .search-title {
                display: flex;
                justify-content: space-between;
        }

        .search-name {
                padding: 4rpx 24rpx;
                background-color: #E1E1E1;
                display: inline-block;
                border-radius: 26rpx;
                margin: 10rpx;
        }

        .search-end {
                text-align: center;
        }
</style>