uniapp 数据缓存应用实例

<template>
    <view>
        <input type="text" v-model="text" placeholder="输入..........">
        <button type="default" @click="serachFn">搜索</button>
        <view>
            <view class="title">历史记录   <text @click="deleteFn">shanchu</text></view>
            <view>
                <block v-for="( item,index) in history">
                    <text class="box">
                        {{item}}
                    </text>
                </block>
                
            </view>
            
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                history:[],   //历史记录数组
                text:""       //搜索内容
            }
        },
        onShow(){
            var that=this;
            // 页面显示获取搜索历史记录信息
            uni.getStorage({
                key: 'history_key',
                success:function(res) {
                    console.log(res.data);
                    console.log("获取缓存成功");
                    that.history=res.data;
                }
            });
        },
        methods:{
            serachFn(){
                // 如果为空则不判断直接返回
                if(!this.text.trim()){
                    return
                }
                // 查找关键字是否已存在   存在返回第一个查找到的内容    不存在返回undefined
                let index=this.history.find(item=>item==this.text.trim());
                if(!index){
                    // 未查找到情况下   历史记录前面增加一条信息
                    this.history.unshift(this.text);
                    // 超过5条删除最后一个   保证一直是显示5条内容
                        if(this.history.length>5){
                            this.history.pop();
                        }
                        // 存入缓存
                        uni.setStorage({ 
                            key: 'history_key',
                            data: this.history,
                            success: function () {
                                console.log('success');
                            }
                        });
                }
            },
            deleteFn(){
                var that=this;
                uni.showModal({
                    title: '提示',
                    content: '这是一个模态弹窗',
                    success: function (res) {
                        if (res.confirm) {
                            that.history=[];
                            uni.setStorage({
                                key: 'history_key',
                                data: that.history,
                                success: function () {
                                    console.log('success');
                                }
                            });
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            }
        }
        
    }
</script>

<style>
    input{ height: 40px; margin: 10px; outline: 1px solid red; padding-left: 10px;}
    .box{ padding: 5px 10px; border: 1px solid #ddd; margin: 10px;}
    .title{ margin: 20px;}
</style>