Question

我试图通过在离子3中使用本地存储来实现离子3中的购物车功能。我试图通过将产品的ID存储在数组中并将其分配给本地存储中的密钥来实现。我写的代码如下：

User.query.filter(User.email_address.op('not regexp')(r'[^@]+@[^@]+\.[^@]+')).all()

但是在上面的代码中，每次只存储添加到数组的最后一个值。那么如何在本地存储中添加新元素并保留以前的值。

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

理解这一点的关键是要意识到Promise解析或拒绝函数，我们传递给then或catch的函数在Promise表示的异步操作完成时执行。

Ionic的Storage.get和Storage.set是基于Promise的API，您需要正确组合它们，以便按正确的顺序进行操作。新的ID确实被添加到allBlogs数组，但在之后被保留。

最简单，最优雅的方法是使用async / await。

你可以使用

的内容

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

当我们使用async函数时，代码的编排会被更改，以便按照编写顺序编排操作，前提是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以一定方式定义allBlogs，但不要将其定义为空数组。

Ionic 3本地存储中的数组

2 个答案: