storage.uvue

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-common-mt">
            <view class="uni-list">
                <view class="uni-list-cell uni-list-cell-line">
                    <view class="uni-list-cell-left">
                        <view class="uni-label">key</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key"
                            @input="keyChange" />
                    </view>
                </view>
                <view class="uni-list-cell">
                    <view class="uni-list-cell-left">
                        <view class="uni-label">value</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data"
                            @input="dataChange" />
                    </view>
                </view>
            </view>
            <view class="uni-padding-wrap">
                <view class="uni-btn-v">
                    <button type="primary" class="uni-btn btn-setstorage" @tap="setStorage">存储数据</button>
                    <button class="uni-btn" @tap="getStorage">读取数据</button>
                    <button class="uni-btn" @tap="clearStorage">清理数据</button>
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts">
    export default {
        data() {
            return {
                title: 'get/set/clearStorage',
                key: '',
                data: ''
            }
        },
        methods: {
            keyChange: function (e : InputEvent) {
                this.key = e.detail.value
            },
            dataChange: function (e : InputEvent) {
                this.data = e.detail.value
            },
            getStorage: function () {
                var key = this.key;
                if (key.length == 0) {
                    uni.showModal({
                        title: '读取数据失败',
                        content: "key 不能为空",
                        showCancel: false
                    })
                } else {
                    uni.getStorage({
                        key: key,
                        success: (res) => {
                            uni.showModal({
                                title: '读取数据成功',
                                content: "data: '" + res.data + "'",
                                showCancel: false
                            })
                        },
                        fail: () => {
                            uni.showModal({
                                title: '读取数据失败',
                                content: "找不到 key 对应的数据",
                                showCancel: false
                            })
                        }
                    })
                }
            },
            setStorage: function () {
                var key = this.key
                var data = this.data
                if (key.length == 0) {
                    uni.showModal({
                        title: '保存数据失败',
                        content: 'key 不能为空',
                        showCancel: false
                    })
                } else {
                    uni.setStorage({
                        key: key,
                        data: data,
                        success: () => {
                            uni.showModal({
                                title: '存储数据成功',
                                content: data,
                                showCancel: false
                            })
                        },
                        fail: () => {
                            uni.showModal({
                                title: '储存数据失败!',
                                showCancel: false
                            })
                        }
                    })
                }
            },
            clearStorage: function () {
                this.key = ''
                this.data = ''
                uni.clearStorageSync()
                uni.showModal({
                    title: '清除数据成功',
                    content: ' ',
                    showCancel: false
                })
            }
        }
    }
</script>

<style>
    .btn-setstorage {
        background-color: #007aff;
        color: #ffffff;
    }
</style>