代码之家 › 专栏 › 技术社区 › Emile Cantero

用于设置和获取对象而不是字符串的离子存储模块

ionic-storage ionic3 ionic-framework typescript

Emile Cantero · 技术社区 · 6 年前

我需要保存一些用户名(输入)和图片(代码中没有显示的另一个按钮,但逻辑是相同的,我认为)在我的爱奥尼亚3应用程序没有经典的数据库(我想我会使用64的基础上的照片从设备相机)。然后我应该检索它们来创建离子卡配置文件。

实际上,每次运行loadUser()函数时,它只检索最后一个用户名,但我想保存更多。即使我进入chrome devtools/indexeddb,我也只能看到一个 key 和 value 保存的。

我需要像保存数据库一样保存这些键和值。

使用带有ngmodel和2个按钮(一个用于设置数据,一个用于获取数据)的输入,我试图在我的离子3应用程序(不带SQL Lite)中保存一些用户名,但我看到storage.set只接受字符串值。我的想法是用 JSON.parse 要检索保存在数组中的数据,但值是beginning处的字符串,因此如果您有任何想法,请通知我。下面是我尝试的代码,但我得到了一个错误:“ core.js:1449错误错误:未捕获(in promise):语法错误:json中位置0处的意外标记d 语法错误:JSON中位置0处的意外标记d 在json.parse()上 他说:“这是一个很好的选择。”

附言:如果还不清楚,你可以自由地问我在附近一段时间。这是我的代码:

参数.ts

export class ParametrePage {

   key: string = 'username';

   inputext: string;

   inputextGroup = [];

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private storage: Storage
 ) {}

  saveUser() {
  // set a key/value
     this.storage.set(this.key, this.inputext);
  }

  loadUser() {
// Or to get a key/value pair

  this.storage.get(this.key).then(val => {
  this.inputtextGroup = JSON.parse(val);
     console.log('You name is', val);
     });
    }
  }

参数.html:

    <h6>Add a profilname</h6>
    <div class="form-container">
      <div class="input-container">
        <p class="diName">Name :</p>
        <ion-input [(ngModel)]="inputext" class="daInput" type="text"></ion- input>
        </div>

  <button class="charlotte-button addUser" ion-button icon-left 
  (click)="saveUser()">
      <ion-icon class="picto picto-reply"></ion-icon>
      Add a user
    </button>

    <button class="charlotte-button addUser" ion-button icon-left 
 (click)="loadUser()">
      <ion-icon class="picto picto-reply"></ion-icon>
      Load user
    </button>

1 回复 | 直到 6 年前

Sergey Rudenko 6 年前

在您的情况下,存储在存储器中的值是一个字符串(inputext:string)。如果您试图按原样分析字符串,json.parse将抛出错误。在此处查看更多信息: Why does JSON.parse("string") fail

现在,根据您的代码,您根本不需要json.parse:

loadUser() {
// Or to get a key/value pair
  this.storage.get(this.key).then(val => {
  this.inputtextGroup = val;
     console.log('You name is', val);
     });
  }
}

但如果你说你的数据输入最终可能是其他东西。然后,您可以使用Try-Catch对其进行一些条件调整:

loadUser() {
// Or to get a key/value pair
  this.storage.get(this.key).then(val => {
         try {
             JSON.parse(val);
         } catch(e) {
             // do here what you need since its a string
         }
             // do here what you need with parsed data
         });
    }
}

现在,如果需要在应用程序中一次存储多个名称。您可以使用以下几种“策略”:

根据“键”区分存储的数据。因此,密钥(在用于将数据保存到存储中的密钥/值对中)应该表示唯一的用户,当然,需要跟踪这些用户才能检索这些用户:

users = ["userUniqueName1", "userUniqueName2", etc]
...
this.storage.get(users[1]).then(()=>{...})

将数据存储在对象中,并在存储之前将其串接:

users = [ 
    { name: "userUniqueName1", surname: "whatever" },
    { name: "userUniqueName2", surname: "whatever" },
    ... 
]

现在,在存储对象(数组)之前,需要对其进行字符串化:

storeUsers() {
    let usersStringifiedObj = JSON.stringify(this.users);
    this.storage.set("users", usersStringifiedObj);
}

retrieveUsers() {
    this.storage.get("users").then( users => {
        this.users = JSON.parse(users);
    })
}