10、uniapp数据缓存

uniapp数据缓存就是利用浏览器的localStorage存储。

1、异步存储

1.1、uni.setStorage(OBJECT)

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

OBJECT 参数说明

1.2、uni.getStorage(OBJECT)

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

OBJECT 参数说明

success 返回参数说明

1.3、uni.removeStorage(OBJECT)

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

OBJECT 参数说明

<template>
	<view>
		<button v-on:click="setStorage">存储数据</button>
		<button v-on:click="getStorage">读取数据</button>
		<button v-on:click="removeStorage">移除数据</button>
	</view>
</template>

<script>
	export default{
		data(){
			return {}
		},
		methods:{
			setStorage(){
				uni.setStorage({
					key:'uid',
					data:JSON.stringify({name:'张三',age:18}),
					success() {
						console.log('存储成功')
					}
				});
			},
			getStorage(){
				uni.getStorage({
					key:'uid',
					success(res) {
						console.log('读取成功'+res.data);
					}
				});
				
			},
			removeStorage(){
				uni.removeStorage({
					key:'uid',
					success(key) {
						console.log('移除成功'+key)
					}
				})
			}
		}
	}
</script>

2、同步存储

同步方法，只有主队列的同步方法执行完了才会执行任务队列里的异步方法。js没有多线程，异步执行是利用的事件循环机制。

2.1、uni.setStorageSync(KEY,DATA)

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

参数说明

2.2、uni.getStorageSync(KEY)

同步获取当前 storage 的相关信息。

2.3、uni.removeStorageSync(KEY)

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

<template>
	<view>
		<button v-on:click="setStorage">存储数据</button>
		<button v-on:click="getStorage">读取数据</button>
		<button v-on:click="removeStorage">移除数据</button>
	</view>
</template>

<script>
	export default{
		data(){
			return {}
		},
		methods:{
			setStorage(){
				try {
					uni.setStorageSync('uid',JSON.stringify({name:'张三',age:18}));
				} catch (e) {
					// error
				}
			},
			getStorage(){
				try {
					const value = uni.getStorageSync('uid');
					if (value) {
						console.log('读取成功'+value);
					}
				} catch (e) {
					// error
				}				
			},
			removeStorage(){
				try {
					uni.removeStorageSync('uid');
				} catch (e) {
					// error
				}
			}
		}
	}
</script>