Question

我需要在没有经典数据库的Ionic 3应用程序中保存一些用户名（输入）和图片（代码中未显示的另一个按钮，但我认为逻辑将是相同的）（我想我将使用base 64基于相机的图片来自设备）。然后我应该检索它们以创建离子卡配置文件。

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

我需要保留这些关键字和值，就像是数据库一样。

使用带有NgModel的输入和2个按钮（一个用于设置数据，一个用于获取数据）我正在尝试在我的Ionic 3应用程序中保存一些用户名（没有Sql Lite）但是我看到storage.set只接受字符串值。我的想法是使用JSON.parse来检索数据保存在一个数组中，但值是在开始时的字符串，所以如果你有任何想法让我知道。 Bellow是我尝试的代码，但是我收到一个错误：“ core.js：1449 ERROR错误：未捕获（在承诺中）：SyntaxError：位于0的JSON中的意外标记d SyntaxError：位于0的JSON中的意外标记d 在JSON.parse（）“

PS：如果不清楚，你可以随意问我已经有一段时间了。这是我的代码：

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

parameter.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>

Answer 1

在您的情况下，存储在Storage中的值是一个字符串（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);
    })
}

Ionic存储模块设置和获取Object而不是字符串

1 个答案: