【UniApp】-uni-app-数据缓存

原创

程序员NEO

修改于 2023-12-17 11:26:14

1.1K0

文章被收录于专栏：『学习与分享之旅』『学习与分享之旅』

前言

好，经过上个章节的介绍完毕之后，给大家补充了一下 uni-app-数据传递的内容
那么补充了 uni-app-数据传递的内容之后，这篇文章来给大家介绍一下 uni-app-数据缓存

搭建项目

首先我们还是要先搭建一个项目，这里我就不多说了，大家可以参考上一篇文章
搭建好项目之后，我们就可以开始我们的正文了

步入正题

首先我们先来看一下 uni-app-数据缓存的 API
官方文档：https://uniapp.dcloud.net.cn/api/storage/storage.html
介绍方向大致就是新增，获取，删除，清空，清空所有（分为异步与同步操作）

新增

新增的话，我们可以通过 uni.setStorage(OBJECT) 来进行新增
新增的话，我们可以通过 uni.setStorageSync(KEY,DATA) 来进行新增
两者的区别就是一个是异步，一个是同步，带有 Sync 的就是同步的，不带有 Sync 的就是异步的
两者的参数不一样，一个是传递一个对象，一个是传递两个参数

好了，下面我们来看一下具体的使用, 首先看同步，代码如下：

<template>
	<view>
		<text>{{ name }}</text>
		<button type="primary" @click="add">新增</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "BNTang"
			}
		},
		onLoad() {},
		methods: {
			add() {
				try {
					uni.setStorageSync('name', 'king');
				} catch (e) {
					// error
				}
			}
		}
	}
</script>

运行测试效果：

好了，下面我们来看一下异步，代码如下：

add() {
    uni.setStorage({
        key: 'name',
        data: 'hello BNTang',
        success: function() {
            console.log('success');
        }
    });
}

运行测试效果：

获取

获取的话，我们可以通过 uni.getStorage(OBJECT) 来进行获取
获取的话，我们可以通过 uni.getStorageSync(KEY) 来进行获取

看一下具体的使用, 首先看同步，代码如下：

<button type="primary" @click="get">获取</button>

get() {
    try {
        this.name = uni.getStorageSync('name');
    } catch (e) {
        // error
    }
}

运行测试效果：

来看一下异步，代码如下：

get() {
    const that = this
    uni.getStorage({
        key: 'name',
        success: function(res) {
            that.name = res.data
        }
    });
}

运行测试效果：

删除

删除的话，我们可以通过 uni.removeStorage(OBJECT) 来进行删除
删除的话，我们可以通过 uni.removeStorageSync(KEY) 来进行删除

看一下具体的使用, 首先看同步，代码如下：

<button type="primary" @click="del">删除</button>

del() {
    try {
        uni.removeStorageSync('name');
    } catch (e) {
        // error
    }
}

运行测试效果：

点击删除按钮之后：

异步略过，大家可以自己去试一下。

清空

清空的话，我们可以通过 uni.clearStorage() 来进行清空
清空的话，我们可以通过 uni.clearStorageSync() 来进行清空

看一下具体的使用, 首先看同步，代码如下：

<button type="primary" @click="clear">清空</button>

clear() {
    try {
        uni.clearStorageSync();
    } catch (e) {
        // error
    }
}

运行测试效果，记得存储点进去之后，再点击清空按钮，这个就不上图片了，大家自己去试一下
异步略过，大家可以自己去试一下

getStorageInfo

再给大家补充一个，getStorageInfo，这个 API 可以获取当前 storage 的相关信息，代码如下：

<button type="primary" @click="getStorageInfoFn">getStorageInfo</button>

getStorageInfoFn() {
    try {
        const res = uni.getStorageInfoSync();
        
        console.log(res);
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    } catch (e) {
        // error
    }
}

运行输出结果：