跨平台应用开发进阶(十) :uni-app 实现数据存储、获取和删除

一、前言

项目开发过程中,需要实现数据的全局存储、获取及删除操作。可通过storageglobalData实现。

二、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。

在使用setStorageSyncsetStorage时,发现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页面生命周期里进行变量重赋值。

  • nvueweex编译模式中使用globalData的话,由于weex生命周期不支持onShow,但熟悉5+的话,可利用监听webviewaddEventListener show事件实现onShow效果,或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式,而不是weex编译模式。

globalData是简单的全局变量,如果使用状态管理,请使用vuex(main.js中定义)。

三、区别

  • Storage方法存储的变量在APP进程杀掉后仍会保留,为防止内存泄漏,需在合适时机(例如应用销毁、用户退出)清除缓存信息。

  • globalData存储的变量生命周期是跟随APP实例生命周期的,当APP销毁后,其存储的变量变被销毁。

应根据具体的应用场景决定使用何种变量存储方法。

四、拓展阅读

相关推荐
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 小时前
前端图像处理(一)
前端