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

一、前言

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

二、setstorage

为此，阅读了uni-app官方文档，发现其已经内置方法实现以上功能。

2.1 应用示例

<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不能传入对象：

uni.setStorageSync({  
	key: 'siteMessage',
	data: provider
})

setStorageSync只支持原生类型、Date、及能够通过JSON.stringify序列化的对象，不能直接传入对象。否则报错：

setStorage:fail parameter error: parameter should be String instead of Object;

三、globalData

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容