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();