注意＆＃34;异步＆＃34;

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

注意＆＃34;异步＆＃34;

请注意，虽然上面允许您立即继续使用其他代码，但一旦执行了该代码，访问本地存储的工作将启动并将使用相同的线程。因此它不像它在后台运行，在 parallel 中使用您自己的JS代码。它只是延迟作业，直到调用堆栈为空。它也不会处理浏览器上下文中的其他事件，直到它完成该作业。因此，例如，它仍将阻止GUI。

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

您可以查看IndexedDB API作为替代方案。但是：

使用
虽然它有一个异步接口，但有几个浏览器实现still block the DOM（因此上述注释适用）
IndexedDB可以由Web Worker使用，它提供了更好的并行性，但实现起来更加复杂。

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

1 个答案:

注意＆＃34;异步＆＃34;