uniapp关于uni.setStorage的使用范例（亲测）

movenight

已于 2023-12-24 17:23:59 修改

阅读量495

点赞数 8

分类专栏： uniapp 文章标签： uni-app javascript 前端

于 2023-12-24 17:10:13 首次发布

本文链接：https://blog.csdn.net/movenight/article/details/135183923

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<template>
    <view>
        <view>
            <input type="text" v-model="content" placeholder="请输入" />
            <button type="primary" @click="writeDb">写入数据</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                content: '',
            }
        },
        methods: {
            writeDb() {
                uni.setStorage({
                    key: 'userInfo',
                    data: this.content,
                    success: function() {
                        console.log('数据存储成功');
                    },
                    fail: function(error) {
                        console.error('数据存储失败:', error);
                    }
                });
            }
        }
    }
</script>

<style lang="scss">

</style>

上述最基本的应用，增加了显示和自动刷新，源代码如下：

<template>
    <view>
        <view>
            <input type="text" v-model="content" placeholder="请输入" />
            <button type="primary" @click="writeDb">写入数据</button>
        </view>
        <view>
            <text>用户信息：{{ userInfo }}</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                content: '',
                userInfo: '',
            }
        },
        onLoad() {
            this.refreshUserInfo(); // 页面加载时刷新一次用户信息
            setInterval(this.refreshUserInfo, 1000); // 每秒自动刷新用户信息
        },
        methods: {
            writeDb() {
                uni.setStorage({
                    key: 'userInfo',
                    data: this.content,
                    success: function() {
                        console.log('数据存储成功');
                    },
                    fail: function(error) {
                        console.error('数据存储失败:', error);
                    }
                });
            },
            refreshUserInfo() {
                const self = this;
                uni.getStorage({
                    key: 'userInfo',
                    success: function(res) {
                        self.userInfo = res.data;
                    },
                    fail: function(error) {
                        console.error('获取用户信息失败:', error);
                    }
                });
            }
        }
    }
</script>

<style lang="scss">

</style>