uni-app-数据缓存

官方文档

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <button @click="setA">存储</button>
        <button @click="getA">获取</button>
        <button @click="removeA">移除</button>
        <button @click="setAs">存储</button>
        <button @click="getAs">获取</button>
        <button @click="removeAs">移除</button>
        <button @click="clearA">清除全部</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            setA(){
                console.log('?')
                //有id有data，才能存储
                uni.setStorage({
                    key:'id',
                    data:60,
                    success() {
                        console.log("成功!")
                    }
                })
            },
            getA(){
                uni.getStorage({
                    key:'id',
                    success(res) {
                        console.log("H成功！"+res.data)
                    }
                })
            },
            removeA(){
                uni.removeStorage({
                    key:"id",
                    success() {
                        console.log("删除成功")
                    }
                })
            },
            setAs(){
                uni.setStorageSync('name',"f")
            },
            getAs(){
                var x = uni.getStorageSync("name")
                console.log(x)
            },
            removeAs(){
                uni.removeStorageSync('name')
            },
            clearA(){
                uni.clearStorage()
            }
        }
    }
</script>

<style>
    .content {
        /* display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center */;
    }

    .logo {
        height: 200rpx;
         200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>