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 同步移除數據