『uni-app』数据缓存详解

时间:2025-03-19 10:29:12

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

官网详解:(OBJECT) @setstorage | uni-app官网

1.异步存储 

(OBJECT)

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

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

示例:

({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		('success');
	}
});

注意:uni-uni_dcloud-dcloud_为前缀的key,为系统保留关键前缀。如uni_deviceIduni_id_token,请开发者为key命名时避开这些前缀。

(OBJECT)

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

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

2.同步存储

(KEY,DATA)

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

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

示例:

('storage_key', 'hello');

()

try {
	const res = ();
	();
	();
	();
} catch (e) {
	// error
}

清除和删除操作请移步官网查看详细操作~

3.扩展(localStorage)

优点:
localStorage 拓展了 cookie 的 4K 限制。

localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库

缺点:
localStorage在浏览器的隐私模式下面是不可读取的。

localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。

区别:
localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空。