使用 Angular2 内存数据刷新后本地存储不起作用
Local Storage does not work after refresh using Angular2 in-memory-data
我正在关注这个图书馆:https://github.com/PillowPillow/ng2-webstorage
我的基础项目改编自Tours of Heroes
目前,我能够将值保存在本地存储中并使用网络存储检索它们。但是,刷新后,我的值恢复为存储在内存中的旧值-data.service.ts
bot.component.html:
<tr *ngFor="let bot of bots" routerLink="/botlevelup/{{bot.id}}">
<td>{{bot.id}}</td>
<td>{{bot.lastLevel}}</td>
<td>{{bot.secondLevel}}</td>
</tr>
内存中-data.service.ts:
import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const bots = [
{"id":1,"lastLevel":5},
{"id":2,"lastLevel":5},
{"id":3,"lastLevel":5}
];
return {bots};
}
}
botlevelup.component.html
Bot: {{bot.id}}
Last Level: <input [(ngModel)]="bot.lastLevel" />
<button (click)="save()">Save</button>
botlevelup.component.ts
save() {
this.storage.store('boundValue', JSON.stringify(bot));
}
我可以看到我的更新值存储在 'boundValue' 使用控制台日志,刷新后仍然存在。
如何在刷新后从 'boundValue' 而不是内存中的原始 data.service.ts 检索更新值?
我想实现一个 if else:
- 如果对机器人 1 和 2 进行了更改,它将从 'boundValue'
中检索
- 如果没有对机器人 3 进行任何更改,它将从内存中检索-data.service。
编辑#1:检索代码片段
getBots(): Observable<Bot[]> {
this.storage.retrieve('boundValue');
return this.http.get<Bot[]>(this.botsUrl)
.pipe(
catchError(this.handleError('getBots', []))
);
}
我设法 return 根据更新的机器人值返回 table,如果没有更新,还有机器人的旧值。
将机器人的原始值存储在本地存储中:
片段:
export const bots: Bot[] = [
{"id":1,"lastLevel":5},
{"id":2,"lastLevel":5},
{"id":3,"lastLevel":5}
]
var local = JSON.stringify(bots);
this.storage.store('localstore', local);
为值更新创建本地存储,在问题中它是存储所有更改的 boundValue。
this.storage.store('boundValue', JSON.stringify(bot));
从 localstore 和 boundValue 中获取值,检查 boundValue 中是否有更新,如果有更新则用更新替换 localstore。
var newValues = this.storage.retrieve('boundValue');
var oldValues = this.storage.retrieve('localstore ');
如果没有新值,return旧值。我为这些值使用变量 'array':
if(boundValue == null){
var array = $.parseJSON(oldValues);
}
否则,更新数组中的旧值:
else{
var valueUpdate = $.parseJSON('[' + newValues + ']');
var array = $.parseJSON(oldValues);
for (var i=0; i<array.length; i++){
for (var m=0; m<valueUpdate.length; m++){
if (valueUpdate[m].id == array[i].id){
array[i] = valueUpdate[m];
break;
}
}
}
}
最后:
this.bots = array;
这可能不是最好的方法,但这是我可以想出的办法。感谢您对我的问题发表的所有评论,这些评论让我知道了我该怎么做。
我正在关注这个图书馆:https://github.com/PillowPillow/ng2-webstorage
我的基础项目改编自Tours of Heroes
目前,我能够将值保存在本地存储中并使用网络存储检索它们。但是,刷新后,我的值恢复为存储在内存中的旧值-data.service.ts
bot.component.html:
<tr *ngFor="let bot of bots" routerLink="/botlevelup/{{bot.id}}">
<td>{{bot.id}}</td>
<td>{{bot.lastLevel}}</td>
<td>{{bot.secondLevel}}</td>
</tr>
内存中-data.service.ts:
import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const bots = [
{"id":1,"lastLevel":5},
{"id":2,"lastLevel":5},
{"id":3,"lastLevel":5}
];
return {bots};
}
}
botlevelup.component.html
Bot: {{bot.id}}
Last Level: <input [(ngModel)]="bot.lastLevel" />
<button (click)="save()">Save</button>
botlevelup.component.ts
save() {
this.storage.store('boundValue', JSON.stringify(bot));
}
我可以看到我的更新值存储在 'boundValue' 使用控制台日志,刷新后仍然存在。
如何在刷新后从 'boundValue' 而不是内存中的原始 data.service.ts 检索更新值?
我想实现一个 if else:
- 如果对机器人 1 和 2 进行了更改,它将从 'boundValue' 中检索
- 如果没有对机器人 3 进行任何更改,它将从内存中检索-data.service。
编辑#1:检索代码片段
getBots(): Observable<Bot[]> {
this.storage.retrieve('boundValue');
return this.http.get<Bot[]>(this.botsUrl)
.pipe(
catchError(this.handleError('getBots', []))
);
}
我设法 return 根据更新的机器人值返回 table,如果没有更新,还有机器人的旧值。
将机器人的原始值存储在本地存储中:
片段:
export const bots: Bot[] = [
{"id":1,"lastLevel":5},
{"id":2,"lastLevel":5},
{"id":3,"lastLevel":5}
]
var local = JSON.stringify(bots);
this.storage.store('localstore', local);
为值更新创建本地存储,在问题中它是存储所有更改的 boundValue。
this.storage.store('boundValue', JSON.stringify(bot));
从 localstore 和 boundValue 中获取值,检查 boundValue 中是否有更新,如果有更新则用更新替换 localstore。
var newValues = this.storage.retrieve('boundValue');
var oldValues = this.storage.retrieve('localstore ');
如果没有新值,return旧值。我为这些值使用变量 'array':
if(boundValue == null){
var array = $.parseJSON(oldValues);
}
否则,更新数组中的旧值:
else{
var valueUpdate = $.parseJSON('[' + newValues + ']');
var array = $.parseJSON(oldValues);
for (var i=0; i<array.length; i++){
for (var m=0; m<valueUpdate.length; m++){
if (valueUpdate[m].id == array[i].id){
array[i] = valueUpdate[m];
break;
}
}
}
}
最后:
this.bots = array;
这可能不是最好的方法,但这是我可以想出的办法。感谢您对我的问题发表的所有评论,这些评论让我知道了我该怎么做。