UniApp基础教程(十七)
数据缓存
1.uniapp数据缓存
uniapp数据缓存常用API见下表：
| 函数名 | 说明 | 同步/异步 |
|---|---|---|
| uni.setStorage | 存储数据 | 异步 |
| uni.setStorageSync | 存储数据 | 同步 |
| uni.getStorage | 从本地缓存中获取指定 key 对应的内容 | 异步 |
| uni.setStorage | 从本地缓存中获取指定 key 对应的内容 | 同步 |
| uni.getStorageInfo | 获取当前 storage 的相关信息 | 异步 |
| uni.getStorageInfoSync | 获取当前 storage 的相关信息 | 同步 |
| uni.removeStorage | 从本地缓存中移除指定 key | 异步 |
| uni.removeStorageSync | 从本地缓存中移除指定 key | 同步 |
| uni.clearStorage | 清空本地数据缓存 | 异步 |
| uni.clearStorageSync | 清空本地数据缓存 | 同步 |
2.实例
pages/index/index.vue
<template>
<view class="container">
<button type="default" @click="testSetStorage">setStorage</button>
<button type="default" @click="testSetStorageSync">setStorageSync</button>
<button type="default" @click="goto('/pages/other/other')">跳转到other页面</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
testSetStorage() {
let user = {
username: 'admin',
password: '123456'
}
uni.setStorage({
key: 'loginUserInfo',
data: user,
success: () => {
console.log('setStorage success....');
}
})
console.log('after do something.... ');
},
testSetStorageSync() {
let user = {
username: 'zhangsan',
password: '654321'
}
try {
uni.setStorageSync('loginSuccessUserInfo', user);
console.log('setStorageSync success....');
} catch (err) {
console.log(err)
}
console.log('after do something.... ');
},
goto(url) {
uni.navigateTo({
url: url
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 98%;
height: auto;
font-size: 14px;
text-align: center;
margin: 0rpx auto;
}
</style>
pages/other/other.vue
<template>
<view class="container">
<text style="font-size: 80rpx; color: crimson; text-decoration: underline;">other.vue</text>
<hr>
<view>
<button type="default" @click="testGetStorage">getStorage</button>
<button type="default" @click="testGetStorageSync">getStorageSync</button>
<button type="default" @click="testGetStorageInfo">getStorageInfo</button>
<button type="default" @click="testGetStorageInfoSync">getStorageInfoSync</button>
<button type="default" @click="testRemoveStorage">removeStorage</button>
<button type="default" @click="testRemoveStorageSync">removeStorageSync</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
testGetStorage() {
uni.getStorage({
key: 'loginUserInfo',
success: (resp) => {
console.log(resp.data);
}
})
},
testGetStorageSync() {
try {
const value = uni.getStorageSync('loginSuccessUserInfo');
if (value) {
console.log(value);
}
}catch(err){
console.log(err);
}
},
testGetStorageInfo() {
uni.getStorageInfo({
success: function(res) {
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
}
});
},
testGetStorageInfoSync(){
try {
const res = uni.getStorageInfoSync();
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
} catch (err) {
console.log(err);
}
},
testRemoveStorage(){
uni.removeStorage({
key: 'loginUserInfo',
success: function (res) {
console.log('remove loginUserInfo success...');
}
});
},
testRemoveStorageSync(){
try {
uni.removeStorageSync('loginSuccessUserInfo');
} catch (e) {
// error
console.log(e);
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 98%;
height: auto;
font-size: 14px;
text-align: center;
margin: 0rpx auto;
}
</style>
运行效果：
