uniapp数据缓存就是利用浏览器的localStorage存储。
官网详解:uni.setStorage(OBJECT) @setstorage | uni-
app官网
1.异步存储
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
data | Any | 是 | 需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例:
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
注意:uni-
、uni_
、dcloud-
、dcloud_
为前缀的key,为系统保留关键前缀。如uni_deviceId
、uni_id_token
,请开发者为key命名时避开这些前缀。
uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
success | Function | 是 | 接口调用的回调函数,res = {data: key对应的内容} |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
2.同步存储
uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
success | Function | 是 | 接口调用的回调函数,res = {data: key对应的内容} |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例:
uni.setStorageSync('storage_key', 'hello');
uni.getStorageInfoSync()
try {
const res = uni.getStorageInfoSync();
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
} catch (e) {
// error
}
清除和删除操作请移步官网查看详细操作~
3.扩展(localStorage)
优点:
localStorage 拓展了 cookie 的 4K 限制。
localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库
缺点:
localStorage在浏览器的隐私模式下面是不可读取的。
localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。
区别:
localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储,而 sessionStorage
属于当会话结束的时候,sessionStorage 中的键值对会被清空。