uniapp - 数据缓存

数据缓存推荐使用 Sync 同步缓存，更多缓存方法请查看 uniapp 官网：https://uniapp.dcloud.io/api/storage/storage?id=setstorage

一. 将数据存储在本地缓存

1. uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例：

<template>
	<view>
		<button @click="setStorage">存储数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			setStorage() {
				uni.setStorage({
					key: 'id',
					data: 10,
					success() {
						console.log("存储成功")
					}
				})
			}
		},
	}
</script>

<style>
</style>

2. uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

示例：

<template>
	<view>
		<button @click="setStorage">存储数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			setStorage() {
				uni.setStorageSync('id',10)
			}
		},
	}
</script>

<style>
</style>

二. 获取本地缓存方法

1. uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数，res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数名	类型	说明
data	Any	key 对应的内容

示例

<template>
	<view>
		<button @click="getStorage">获取数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			getStorage(){
				uni.getStorage({
					key:'id',
					success(res){
						console.log('获取成功',res)
					}
				})
			}
		},
	}
</script>

<style>
</style>

2. uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key

示例

<template>
	<view>
		<button @click="getStorage">获取数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			getStorage(){
				const res = uni.getStorageSync('id')
				console.log(res)
			}
		},
	}
</script>

<style>
</style>

三. 移除本地缓存数据

1. uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

<template>
	<view>
		<button @click="removeStorage">移除数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			removeStorage(){
				uni.removeStorage({
					key:'id',
					success() {
						console.log('删除成功')
					}
				})
			}
		},
	}
</script>

<style>
</style>

2. uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key

示例

<template>
	<view>
		<button @click="removeStorage">移除数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			removeStorage(){
				uni.removeStorageSync('id')
			}
		},
	}
</script>

<style>
</style>