前言
- 好，经过上个章节的介绍完毕之后，给大家补充了一下 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
}
}
运行输出结果：
- keys：当前 storage 中所有的 key
- currentSize：当前占用的空间大小, 单位 kb
- limitSize：限制的空间大小, 单位 kb
- 异步略过，大家可以自己去试一下
和 HTML5 的数据缓存是一样的都是放到 Storage 里面的
End
- 如果你有任何问题或建议，欢迎在下方留言，我会尽快回复
- 如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力
