一、前言
项目开发过程中,需要实现数据的全局存储、获取及删除操作。可通过storage
、globalData
实现。
二、setstorage
为此,阅读了uni-app
官方文档,发现其已经内置方法实现以上功能。
2.1 应用示例
java
<template>
<view class="content">
<button type="primary" @click="setStorage">存储数据</button>
<button type="primary" @click="getStorage">获取数据</button>
<button type="primary" @click="delStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
setStorage() {
uni.setStorage({
key: 'name',
data: 'uniapp',
success() {
console.log('存储数据')
}
})
},
getStorage() {
uni.getStorage({
key: 'name',
success(res) {
console.log('获取成功', res.data)
}
})
},
delStorage() {
uni.removeStorage({
key: 'name',
success() {
console.log('删除成功')
}
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
注⚠️:如果是同步存储、获取、删除,可以使用setStorageSync()
、getStorageSync()
、removeStorageSync()
,达到的效果是一样的。
那么,有童鞋会问setStorage()
与setStorageSync()
都可以存储全局变量,两者又有什么区别呢?如何根据不同的应用场景去应用不同方法呢?
首先,官方文档给出的方法定义如下:
从接口定义可以看出,setStorage()
异步接口可以接口调用后回调相关方法,主要是根据业务需求来判定使用哪种方法。
以Sync
(同步,同时)结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。
通俗点说,异步就是不管保没保存成功,程序都会继续往下执行。同步是等保存成功了,才会执行下面的代码。使用异步,性能会更好;而使用同步,数据会更安全。
注意⚠️:它们都是将数据存储在本地缓存指定的key中,单个key最大数据长度为 1MB,所有数据存储上限为 10MB。
在使用setStorageSync
和setStorage
时,发现setStorageSync
不能传入对象:
java
uni.setStorageSync({
key: 'siteMessage',
data: provider
})
setStorageSync
只支持原生类型、Date、及能够通过JSON.stringify
序列化的对象,不能直接传入对象。否则报错:
setStorage:fail parameter error: parameter should be String instead of Object;
三、globalData
一种简单的全局变量机制。
以下是 App.vue
中定义globalData
的相关配置:
javascript
<script>
export default {
globalData: {
text: 'text'
}
}
</script>
js
中操作globalData
的方式如下: getApp().globalData.text = 'test'
注意⚠️:
在应用
onLaunch
时,getApp
对象还未获取,暂时可以使用this.globalData
获取globalData
。如果需要把
globalData
的数据绑定到页面上,可在页面的onShow
页面生命周期里进行变量重赋值。
nvue
的weex
编译模式中使用globalData
的话,由于weex
生命周期不支持onShow
,但熟悉5+的话,可利用监听webview
的addEventListener
show事件实现onShow
效果,或者直接使用weex
生命周期中的beforeCreate
。但建议开发者使用uni-app
编译模式,而不是weex
编译模式。
globalData
是简单的全局变量,如果使用状态管理,请使用vuex
(main.js中定义)。
三、区别
-
Storage
方法存储的变量在APP进程杀掉后仍会保留,为防止内存泄漏,需在合适时机(例如应用销毁、用户退出)清除缓存信息。 -
globalData
存储的变量生命周期是跟随APP实例生命周期的,当APP销毁后,其存储的变量变被销毁。
应根据具体的应用场景决定使用何种变量存储方法。