web-dev-qa-db-ja.com

javascriptで非同期の方法でlocalstorage setItemを実行するための解決策はありますか

ionic app validationing token based authを使用して、トークンをlocalstorageに格納すると、次の状態に移行する間にトークンを格納するのに時間がかかりますが、localstorageに値を設定する非同期の方法を実行するためのソリューションです

window.localStorage.setItem('ChemistloggedInUser', JSON.stringify(data))
javascriptangularjsionic-framework
15
koneri ranjith kumar

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'));

SOスニペットではlocalStorageの使用が許可されていないため、 repl.it で実行されることを確認してください。

新しい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コードとparallelで実行します。コールスタックが空になるまで、ジョブを遅延します。また、そのジョブが完了するまで、ブラウザコンテキストからの他のイベントも処理しません。したがって、たとえば、それでもGUIはブロックされます。

並行してアクセスする必要がある場合は、localStorageを使用することはできません。たとえば、そのAPIはWebワーカーでは利用できません。

代わりに IndexedDB API を調べることもできます。だが：

  • 作業ははるかに複雑です
  • 非同期インターフェースがありますが、いくつかのブラウザー実装 それでもDOMをブロックします （上記のコメントが適用されます）
  • IndexedDBはWebワーカーが使用でき、並列性が向上しますが、実装がさらに複雑になります。
17
trincot