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

Question

使用 ionic 应用程序验证基于 token 的身份验证，将 token 存储在本地存储中需要时间存储在它移动到下一个状态之间是任何以异步方式在本地存储中设置值的解决方案

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

Answer 1

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 代码并行。它只是延迟 作业直到调用堆栈为空之后。在完成该作业之前，它也不会处理来自浏览器上下文的其他事件。因此，例如，它仍然会阻止 GUI。

如果您需要并行访问，那么使用 localStorage 就不走运了。例如，该 API 在 Web Workers 中不可用，否则这可能是一条出路。

您可以查看 IndexedDB API作为备选。但是:

• 使用起来要复杂得多
• 虽然它有一个异步接口(interface)，但有几个浏览器实现 still block the DOM (因此上述评论适用)
• Web Worker 可以使用 IndexedDB，这提供了更好的并行性，但实现起来更加复杂。