uniapp数据缓存同步(setStorage)跟异步(setStorageSync)的区别

Posted 2021-08-25 GHUIJS

我一直都很喜欢用浏览器原生的本地存储，之前用得多这样子。前几天开发uniapp，用浏览器的原生本地存储，浏览器里没问题，但打包成app就不能用了。后来用了uniapp官方提供的本地存储，打包后能用，不得不说官方就是，但是第一用的时候，这个同步异步让我有点懵。但它同步异步的存在，肯定是有它的道理的。

我们先看看官方定义：

uni.setStorage(OBJECT)

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

uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});

uni.setStorageSync(KEY,DATA)

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

uni.setStorageSync('storage_key', 'hello');

 就写法看，同步接口用起来方便，跟js原生存储没两样，存键值对。而异步接口是可以写存取数据回调。

接下来，我们就去试着用用。

uni.setStorage({
	key:'ghui',
	data:'我系渣渣辉',
	success() {
		uni.showToast({
			title:'储存成功'
		});
	}
});
			
let ghui = uni.getStorage({
	key:'ghui'
})

let GHUI = uni.getStorageSync('ghui');

console.log(ghui,GHUI);

控制台结果是这样：

后来我改了一下：

uni.getStorage({
	key:'ghui',
	success(res) {
		console.log(res);
	}
})

 就是说，异步接口取缓存返回的结果，只能够在成功回调中使用，特点是拿到缓存数据后不用等待不相干的逻辑执行完，就直接执行相关逻辑，更快，但是写起来层层嵌套、不美观。回想第一次控制台打印的promise，我仿佛想到了什么。

uni.getStorage({
	key:'ghui',
}).then(res => {
	console.log(res);
})

果然，是可以的，不过取到的是一个数组，数据存在第二项：

 这样的话，就可以避免层层嵌套了。而同步接口，除了写起来方便之外，他可以赋值成一个变量，用起来也方便，而且又是同步执行，不用考虑缓存没取到就执行后面逻辑问题，用来了跟原生一样，就不多写了，言多必失。

自己片面理解，不对的望各位大佬多多指教。