陣列在離子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

對我來說，它看起來像你正在初始化allBlogs到一個空的數組。

我會做一些嘗試，如果從本地存儲。 如果未找到，則初始化爲空數組 使用let over var通過所有方法定義allBlog，但不將其定義爲空數組。