离子存储模块设置和获取对象而不是字符串
Ionic Storage Module to set and get Object instead of string
我需要在没有经典数据库的 Ionic 3 应用程序中保存一些用户名(输入)和图片(代码中未显示的另一个按钮,但逻辑我认为是相同的)(我想我会使用基础64 为基于设备相机的图片)。然后我应该检索它们以使用它创建离子卡配置文件。
实际上每次我 运行 我的 loadUser() 功能它只检索我最后的用户名,但我想保存更多。即使我进入 chrome DevTools/IndexedDB 我也只能看到一个 key
和 value
保存。
我需要像数据库一样持久化这些键和值。
使用带有 NgModel 的输入和 2 个按钮(一个用于设置数据,一个用于获取数据)我试图在我的 Ionic 3 应用程序(没有 Sql Lite)中保存一些用户名,但我看到了storage.set 只接受字符串值。我的想法是使用 JSON.parse
来检索保存在数组中的数据,但值在开始时是字符串,所以如果您有任何想法请告诉我。
波纹管是我试过的代码,但我得到一个错误:“core.js:1449 错误错误:未捕获(承诺):语法错误:位置 0 JSON 中的意外标记 d
SyntaxError:JSON 中位置 0 的意外标记 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>
在您的情况下,存储在存储中的值是一个字符串 (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
});
}
}
现在如果需要在应用程序中一次存储多个姓名。有几个"strategies"可以使用:
- 根据"key"区分存储的数据。所以密钥(在你用来将数据保存到存储中的 key/value 对中)应该代表唯一的用户,当然需要一些东西来跟踪这些用户以便能够检索这些用户:
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 3 应用程序中保存一些用户名(输入)和图片(代码中未显示的另一个按钮,但逻辑我认为是相同的)(我想我会使用基础64 为基于设备相机的图片)。然后我应该检索它们以使用它创建离子卡配置文件。
实际上每次我 运行 我的 loadUser() 功能它只检索我最后的用户名,但我想保存更多。即使我进入 chrome DevTools/IndexedDB 我也只能看到一个 key
和 value
保存。
我需要像数据库一样持久化这些键和值。
使用带有 NgModel 的输入和 2 个按钮(一个用于设置数据,一个用于获取数据)我试图在我的 Ionic 3 应用程序(没有 Sql Lite)中保存一些用户名,但我看到了storage.set 只接受字符串值。我的想法是使用 JSON.parse
来检索保存在数组中的数据,但值在开始时是字符串,所以如果您有任何想法请告诉我。
波纹管是我试过的代码,但我得到一个错误:“core.js:1449 错误错误:未捕获(承诺):语法错误:位置 0 JSON 中的意外标记 d
SyntaxError:JSON 中位置 0 的意外标记 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>
在您的情况下,存储在存储中的值是一个字符串 (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
});
}
}
现在如果需要在应用程序中一次存储多个姓名。有几个"strategies"可以使用:
- 根据"key"区分存储的数据。所以密钥(在你用来将数据保存到存储中的 key/value 对中)应该代表唯一的用户,当然需要一些东西来跟踪这些用户以便能够检索这些用户:
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);
})
}