跨平台应用开发进阶(十) :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销毁后,其存储的变量变被销毁。

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

四、拓展阅读

相关推荐
耶啵奶膘29 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro