uniapp 中的数据缓存

  • 一. 将数据存储在本地缓存
  • 1. uni.setStorage(OBJECT)
  • 2. uni.setStorageSync(KEY,DATA)
  • 二. 获取本地缓存方法
  • 1. uni.getStorage(OBJECT)
  • 2. uni.getStorageSync(KEY)
  • 三. 移除本地缓存数据
  • 1. uni.removeStorage(OBJECT)
  • 2. uni.removeStorageSync(KEY)


数据缓存推荐使用 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>