- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情
UniApp的数据缓存
数据缓存在前端页面上非常常见，在一些特定场合需要借助数据缓存来实现，在UniApp中我们是如何实现的呢？
一丶使用 uni.setStorage(OBJECT) 用来存储数据（异步）
熟悉后端的同学应该不陌生，这就是类似于操作Redis的语法，但是在使用UniApp缓存的时候还要注意的是uni-、uni_、dcloud-、dcloud_ 为前缀的key，为系统保留关键前缀。使用的时候还是要避免使用这些Key前缀，避免踩坑哦。同步方法为uni.setStorageSync(key,object)
uni.setStorage({
key: 'key',// 存放数据的Key
data: obj,// 存放的数据
success: function () {
// 接口调用成功的回调
},
fail:function(){
// 调用失败的回调
},
complete:function(){
// 失败成功都会执行
}
});
// 也可以不使用函数直接使用
uni.setStorage(key,object)
注意：
- H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
- App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
二丶使用 uni.getStorage(key) 获取缓存内容
// 获取Key存储的缓存
const value = uni.getStorage('key');
// 同步方法
const value = uni.getStorageSync('key');
三丶使用 uni.getStorageInfo(OBJECT) 获取缓存相关信息
uni.getStorageInfo({
success: function (res) {
console.log(res.keys); // 获取已缓存的所有key
console.log(res.currentSize); // 当前占用的空间大小
console.log(res.limitSize); // 限制的空间大小
}
});
四丶使用 uni.removeStorage(key) 删除指定key
像在H5中缓存浏览器缓存有限制大小，所以在某些具备时效性的key记得及时清理，避免缓存过大导致缓存失效。
// 删除缓存中指定的key
uni.removeStorageSync('storage_key');
UniApp 中的路由跳转
UniApp中的路由跳转与原生小程序非常相似
1.从A页面跳转到B页面 不关闭A
uni.navigateTo({
url: '/index?id=1'
});
2.关闭当前页面，跳转到应用内的某个页面。
uni.redirectTo({
url: '/index?id=1'
});
3.关闭所有页面，打开到应用内的某个页面
uni.reLaunch({
url: '/index?id=1'
});
4.跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({
url: '/pages/index/index'
});
- 返回页面，UniApp提供了返回页面的方法，无需再指定路由，直接跳转即可。
// data参数值的是跳转的级数，即从A页面跳转B页面 B跳转C 如下调用会返回到A页面
// 可通过 getCurrentPages() 获取当前的页面栈
uni.navigateBack({
delta: 2
});
但是要值得注意的是，用户从A页面跳转页面后，用户主动刷新页面，会导致页面栈失效，即会出现无法跳转回来的情况。
- 跳转页面后刷新页面栈被清空处理
// History 对象是 window 对象的一部分
// back() 方法可加载历史列表中的前一个 URL（如果存在）。
history.back()
// go() 方法可加载历史列表中的某个具体的页面。
history.go(number|URL)
如果使用强制跳转，返回之后的数据将不再缓存即会重新加载。
