uni-app学习：8、数据缓存

居家隔离14-10 快解放啦

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

OBJECT 参数说明

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

uni.getStorage(OBJECT) 从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数说明

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

样例

<template>
	<view class="content">		
		<view><button type="primary" @click="fun_getstore">获取缓存</button></view>
		<view>{{store_value}}</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {				
				store_value: ''
			}
		},
		onLoad() {
			_self = this;

			// 一般不需要做 success 处理
			uni.setStorage({
				key: 'store_key',
				data: '小明',
				success: function() {
					console.log('success');
				}
			});
		},
		methods: {
			fun_getstore: function() {
				// 一般不需要做 success 处理
				uni.getStorage({
				    key: 'store_key',
				    success: function (res) {
				        console.log(res.data);
						_self.store_value=res.data;
				    }
				});
			}
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 20upx;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}

	h5 {
		margin-top: 10px;
	}
</style>

效果

来源：oschina

链接：https://my.oschina.net/qingqingdego/blog/3174005

标签

uni-app