是否有任何解决方案在javascript中以异步方式执行localstorage setItem

使用离子应用程序验证基于令牌的身份验证,将令牌存储在localstorage中需要时间来存储它之间正在转移到下一个状态是任何解决方案以异步方式在localstorage中设置值

window.localStorage.setItem('ChemistloggedInUser',JSON.stringify(data))

解决方法

localStorage是一个同步API.您可以使用Promise对象推迟setItem方法执行,从而为它们提供异步行为：

const asyncLocalStorage = {
    setItem: function (key,value) {
        return Promise.resolve().then(function () {
            localStorage.setItem(key,value);
        });
    },getItem: function (key) {
        return Promise.resolve().then(function () {
            return localStorage.getItem(key);
        });
    }
};

// Demo
const data = Date.Now() % 1000;
asyncLocalStorage.setItem('mykey',data).then(function () {
    return asyncLocalStorage.getItem('mykey');
}).then(function (value) {
    console.log('Value has been set to:',value);
});
console.log('waiting for value to become ' + data + 
            '. Current value: ',localStorage.getItem('mykey'));

看它在repl.it上运行,因为SO片段不允许使用localStorage.

使用较新的async / await语法,此asyncLocalStorage可以写为：

const asyncLocalStorage = {
    setItem: async function (key,value) {
        await null;
        return localStorage.setItem(key,value);
    },getItem: async function (key) {
        await null;
        return localStorage.getItem(key);
    }
};

repl.it

关于“异步”的说明

请注意,虽然上面允许您立即继续使用其他代码,但一旦执行了该代码,访问本地存储的任务将启动并将使用相同的线程.所以它不像它在后台运行,与你自己的JS代码并行.它只是将任务延迟到调用堆栈为空之后.

如果您需要并行进行访问,那么您对localStorage运气不佳.例如,Web Worker中没有该API,否则这可能是一种可能的出路.

您可以将IndexedDB API作为替代方案.但：

>使用起来要复杂得多
>虽然它有一个异步接口,但有几个浏览器实现still block the DOM(所以上面的注释适用)> Webed Worker可以使用IndexedDB,它提供了更好的并行性,但实现起来却更加复杂.

原文地址：https://www.jb51.cc/js/150489.html