イオニック3ローカルストレージ内の配列

Question

イオン3のローカルストレージを使用して、イオン3でカート機能を実装しようとしています。私は、製品のIDを配列に格納してローカルのキーに割り当てようとしていますストレージ。次のように私はこれを行うために書いたコードは次のとおりです。

var allBlogs = []; 
this.storage.get('products').then((val) => { 
console.log(val + " = previous value") 
allBlogs.push(val)}); 
allBlogs.push(this.navParams.get('id')) ; 
console.log(allBlogs); 
this.storage.set('products', allBlogs); 

しかし、上記のコードで配列に追加最後の値だけが、それぞれが、私が保存してローカルストレージ内の配列に新しい要素を追加する方法time.so保存されています以前の値。

Answer 1

問題を解決するコードには、いくつかの問題があります。これは、ここではPromisesで表される非同期操作の順序になります。

thenコールバック内のすべてが、メソッドの残りのコードの後に​​実行されます。

オペレーションが論理的に発生する順序を数字0から6で示しました。

var allBlogs = []; // 0 
this.storage.get('products').then((val) => { // 1 
    console.log(val + " = previous value"); // 5 
    allBlogs.push(val); // 6 
}); 
allBlogs.push(this.navParams.get('id')); // 2 
console.log(allBlogs); // 3 
this.storage.set('products', allBlogs); // 4 

これを理解する鍵は、約束​​によって表される、非同期操作が完了すると約束解像度や除去機能は、我々はthenまたはcatchに渡す関数が実行されていることを実現することです。

IonicのStorage.getとStorage.setはPromiseのAPIであるため、適切な順序で操作が行われるように正しく構成する必要があります。新しいIDは実際にallBlogs配列に追加されましたが、の後にはとなりました。

これを行う最も簡単で最も洗練された方法は、async/awaitを使用することです。

私たちはアクションはそれらが書き込まれた順に画策されているようにコードのオーケストレーションが変更されasync機能を使用する場合、あなたは

const key = 'products'; 

constructor(readonly storage: Storage, navParams: NavParams) { 
    const {id} = navParams.data; 
    this.updateStorage(id).catch(reason => console.error(reason)); 
} 

async updateStorage(newId) {, f 
    const storedIds = await this.storage.get(key) || []; 
    const updatedIds = [...storedIds, newId]; 
    await this.storage.set(key, updatedIds); 
} 

の線に沿って何かを使用することができますが、awaitが使用されていることを提供しました正しい位置に置いてください。これは構文上の利便性です。

アイテムがまだ存在しない場合は追加する場合は、Array.prototype.includesを使用して挿入前に存在を確認できます。

async ensureId(id) { 
    const storedIds = await this.storage.get(key) || []; 
    if (storedIds.includes(id)) { 
    return; 
    } 
    const updatedIds = [...storedIds, id]; 
    await this.storage.set(key, updatedIds); 
} 

Answer 2

私には、すべてのブログを空の配列に初期化しているようです。

私はローカルストレージから試して取得するようなことをします。 見つからない場合は、空の配列に初期化してください letBarを使用してallBlogを定義しますが、空の配列として定義しないでください。