uni-app数据缓存

一 点睛

官网地址： http://uniapp.dcloud.io/api/storage/storage?id=setstorage

二 实战

<template>
    <view>
        <view>
            <button type="primary" @click="setStorage">缓存数据</button>
        </view>
        <view>
            <button type="primary" @click="getStorage">获取数据</button>
        </view>
        <view>
            <button type="primary" @click="removeStorage">移除数据</button>
        </view>
        <view>
            <button type="warn" @click="setSyncStorage">同步缓存数据</button>
        </view>
        <view>
            <button type="warn" @click="getSyncStorage">同步获取数据</button>
        </view>
        <view>
            <button type="warn" @click="removeSyncStorage">同步移除数据</button>
        </view>
        <view>
            <button @click="getData">发送get请求</button>
        </view>
        <view>这是列表页</view>
        <view class="box-item" v-for="item in list">{{item}}</view>
        <!-- <button @click="pullDown">下列刷新</button> -->
    </view>
</template>


<script>
    export default {
        data() {
            return {
                list: ['前端', 'java', '测试', 'UI', '大数据', '前端', 'java', '测试', 'UI', '大数据']
            }
        },
        onPullDownRefresh() {
            this.list = ['java', '测试', '前端', 'UI', '大数据']
            setTimeout(() => {
                uni.stopPullDownRefresh()
            }, 2000)


        },
        onReachBottom() {
            this.list = [...this.list, ...['java', '测试', '前端', 'UI', '大数据']]
        },
        methods: {
            pullDown() {
                uni.startPullDownRefresh()
            },
            getData() {
                uni.request({
                    url: 'http://127.0.0.1:8888/api/private/v1/users', //仅为示例，并不是真实接口地址。
                    success: (res) => {
                        console.log('get成功');
                        console.log(res.data);
                    },
                    fail: (res) => {
                        console.log('get失败');
                        console.log(res.data);
                    }
                });
            },
            setStorage() {
                uni.setStorage({
                    key: 'id',
                    data: 'hello',
                    success: function() {
                        console.log('success');
                    }
                });
            },
            getStorage() {
                uni.getStorage({
                    key: 'id',
                    success: function(res) {
                        console.log('get success');
                        console.log(res.data);
                    }
                });
            },
            removeStorage() {
                uni.removeStorage({
                    key: 'id',
                    success: function(res) {
                        console.log('remove success');
                    }
                });
            },
            setSyncStorage() {
                uni.setStorageSync('name', 'cakin');
            },
            getSyncStorage() {
                const value = uni.getStorageSync('name');
                console.log(value)
            },
            removeSyncStorage() {
                uni.removeStorageSync('name')
            }
        }


    }
</script>


<style>
    .box-item {
        height: 100px;
        line-height: 100px;
    }
</style>

三 效果

1 存储数据

2 取出数据

3 移除数据

4 同步存储数据

5 同步取出数据

6 同步移除数据