我一直都很喜欢用浏览器原生的本地存储,之前用得多这样子。前几天开发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);
})

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

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

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐