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

前言

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

搭建项目

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

步入正题

新增

  • 新增的话，我们可以通过 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
    }
}

运行输出结果：

  • keys：当前 storage 中所有的 key
  • currentSize：当前占用的空间大小, 单位 kb
  • limitSize：限制的空间大小, 单位 kb
  • 异步略过，大家可以自己去试一下

和 HTML5 的数据缓存是一样的都是放到 Storage 里面的

End

  • 如果你有任何问题或建议，欢迎在下方留言，我会尽快回复
  • 如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力

posted @ 2023-12-17 23:50  BNTang  阅读(550)  评论(0)  编辑  收藏  举报