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

Question

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

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

Answer 1

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

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作为替代方案.但:

• 使用起来要复杂得多
• 虽然它有一个异步接口,但是几个浏览器实现仍然阻止了DOM(所以上面的注释适用)
• IndexedDB可以由Web Worker使用,它提供了更好的并行性,但实现起来更加复杂.