图像数组存储

Question

我正在制作有角度的小游戏，我遇到了如何将带有图像的数组导出到存储的问题，所以当我重新加载页面时它不会消失。数组由其他数组中的随机项组成，按按钮添加下一项。

这是我的打字稿代码

containers = [];
images = [
  { id: 0, name: "sword", url: "../../../../assets/img/sword.png" },
  { id: 1, name: "sword2", url: "../../../../assets/img/sword2.png" },
];

add() {
  let index = Math.round(Math.random());
  this.containers.push(this.images[index]);
}

这是在 html 中：

<button (click)="add()">Add</button>
<div id="content">
  <div id="contentInside" *ngFor="let image of containers">
    <img class="item" src="{{image.url}}" />
  </div>
</div>

I want to keep it looking like this

Answer 1

您可以在本地存储中存储图像数组的副本

localStorage.setItem('images', JSON.stringify(this.images))

并通过简单地在浏览器重新加载时检索这些图像

private images = JSON.parse(localStorage.getItem('images')) || [];