Uniapp：本地存储
目录
一、概述
在Uniapp项目开发的过程中，需要再本地存储一些数据，例如Token、用户信息等，当在断网的情况下还需要把数据先存储到本地，等网络恢复之后再进行上传。
二、分类
Uniapp本地存储提供了两种方式：同步存储和异步存储，主要区别是：
- 异步存储(setStorageSync)：不管有没有成功都会继续往下执行
- 同步存储(setStorage)：只有存储成功之后才会继续往下执行
三、同步存储：setStorageSync
3.1 方法
| 方法 | 概述 |
|---|---|
| uni.setStorageSync(key, data) | 将数据同步保存在本地缓存中，key为字符串类型，表示要保存数据的键，data可以是任何支持JSON序列化的数据类型 |
| uni.getStorageSync(key) | 从本地缓存中同步获取指定key的数据 |
| uni.getStorageInfoSync() | 同步获取当前 storage 的相关信息 |
| uni.removeStorageSync(key) | 从本地缓存中同步移除指定key的数据 |
| uni.clearStorageSync() | 清空本地缓存中所有数据 |
3.2 案例
3.2.1 存储
存储对象或者数组的时候，需要对数据进行序列化
let obj = {
id:'1',
name:"wwww",
list:[{
id:'2',
name:"eeee",
list:[{
id:'3',
name:"tttt",
}]
}]
};
let item = JSON.stringify(obj);
uni.setStorageSync('objData', item);
3.2.2 获取
获取对象或者是数组的时候，需要对数据进行反序列化
let data = uni.getStorageSync('objData')
console.log(JSON.parse(data));
3.2.3 获取storage
success 返回参数说明
| 参数名 | 类型 | 说明 |
|---|---|---|
| key | Array＜String＞ | 当前 storage 中所有的 key |
| currentSize | Number | 当前占用的空间大小, 单位：kb |
| limitSize | Number | 限制的空间大小, 单位：kb |
uni.getStorageInfo({
success: function (res) {
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
}
});
3.2.4 删除
del(){
uni.removeStorageSync('objData')
}
3.2.5 清空
delAll(){
uni.clearStorageSync()
}
四、异步存储：setStorage
4.1 方法
| 方法 | 概述 |
|---|---|
| uni.setStorage(Object) | 将数据异步保存在本地缓存中 |
| uni.getStorage(Object) | 从本地缓存中异步获取指定key的数据 |
| uni.getStorageInfo(Object) | 异步获取当前 storage 的相关信息 |
| uni.removeStorage(Object) | 从本地缓存中异步移除指定key的数据 |
| uni.clearStorage() | 清理本地数据缓存 |
4.2 案例
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| key | String | 是 | 本地缓存中的指定的 key |
| data | Any | 是 | 需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
4.2.1 存储数据
onShow(){
let obj = {
id:'1',
name:"wwww",
list:[{
id:'2',
name:"eeee",
list:[{
id:'3',
name:"tttt",
}]
}]
};
uni.setStorage({
key: 'storage_key',
data: obj,
success: function(){
console.log('success'); //成功
},
fail:function(){
console.log("fail");//失败
},
complete:function(){
console.log("complete");//成功失败都调
}
});
},
4.2.2 获取数据
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| key | String | 是 | 本地缓存中的指定的 key |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
success 返回参数说明
| 参数名 | 类型 | 说明 |
|---|---|---|
| key | String | 本地缓存中的指定的 key |
get(){
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
},
4.2.3 获取storage详情
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
success 返回参数说明
| 参数名 | 类型 | 说明 |
|---|---|---|
| key | Array＜String＞ | 当前 storage 中所有的 key |
| currentSize | Number | 当前占用的空间大小, 单位：kb |
| limitSize | Number | 限制的空间大小, 单位：kb |
uni.getStorageInfo({
success: function (res) {
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
}
});
4.2.4 删除
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| key | String | 是 | 本地缓存中的指定的 key |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
uni.removeStorage({
key: 'storage_key',
success: function (res) {
console.log('success');
}
});
4.2.5 清空
uni.clearStorage();
原文地址：https://blog.csdn.net/jhgfvjfggff_fds_f/article/details/147223448
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！