搜索页面获取搜索历史

<template>
    <view class="search-container">
        <view class="search-head">
            <u-search placeholder="输入查找" shape="square" placeholder-color="#999" input-align="center" bg-color="#f5f6f7" :show-action="false" v-model="keyword" @search="Search"></u-search>
        </view>
        <view class="search-text">
            <view class="text-left">搜索历史</view>
            <view class="text-right" @click="handleRemove"><image mode="widthFix" src="../../../static/center-icon/icon_ss_sc.png"></image></view>
        </view>
        <view class="search-content">
            <view class="search-item" v-for="(item,index) in list" :key="index">{{ item }}</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keyword:'',
                list:[]
            }
        },
        created() {
            let arr = uni.getStorageSync('list')
            if(arr != '' && arr != undefined) {
                this.list = uni.getStorageSync('list')
            } else {
                this.list = []
            }
        },
        methods:{
            handleRemove() {
                uni.removeStorageSync('list')
                this.list = []
            },
            Search(value) {
                this.list.push(this.keyword)
                uni.setStorageSync('list',this.list)
                console.log(value)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .search-container{
        background-color: #fff;
        min-height: 100vh;
        padding: 0 30rpx;
        .search-head{
            width: 100%;
            height: 90rpx;
            border-bottom: 1px solid #f4f1f1;
        }
        .search-text{
            padding: 30rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .text-left{
                color: #000;
                font-size: 34rpx;
            }
            .text-right{
                width: 25rpx;
                image{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .search-content{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .search-item{
                background-color: #f5f6f7;
                padding: 4rpx 10rpx;
                margin: 0 20rpx 10rpx 0;
            }
        }
    }
</style>