使用 Angular2 内存数据刷新后本地存储不起作用

Question

我正在关注这个图书馆：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', []))
    );
  }

Answer 1

我设法 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;

这可能不是最好的方法，但这是我可以想出的办法。感谢您对我的问题发表的所有评论，这些评论让我知道了我该怎么做。

使用 Angular2 内存数据刷新后本地存储不起作用

Local Storage does not work after refresh using Angular2 in-memory-data

angular

local-storage

web-storage