Angular小游戏开发：如何持久化图片数组至Storage避免刷新丢失

嘿，这个场景太常见啦！要让你的containers数组在页面刷新后不丢失，只需要借助浏览器的localStorage做数据持久化就行，完全不用改动现有界面效果。下面是具体的实现方案：

核心思路 #

1. 存数据：每次点击添加按钮后，把containers数组转成字符串存入localStorage（因为浏览器存储只能存字符串类型）
2. 读数据：组件初始化时，从localStorage取出之前存的数组，转成对象格式重新赋值给containers

修改后的TypeScript代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  // 你的组件元数据保持不变
})
export class YourGameComponent implements OnInit {
  containers: any[] = [];
  images = [
    { id: 0, name: "sword", url: "../../../../assets/img/sword.png" },
    { id: 1, name: "sword2", url: "../../../../assets/img/sword2.png" },
  ];

  ngOnInit(): void {
    // 页面加载时，从本地存储恢复数据
    const savedData = localStorage.getItem('gameContainers');
    if (savedData) {
      this.containers = JSON.parse(savedData);
    }
  }

  add() {
    let index = Math.round(Math.random());
    this.containers.push(this.images[index]);
    // 添加新元素后，立刻同步到本地存储
    localStorage.setItem('gameContainers', JSON.stringify(this.containers));
  }
}

关键细节解释 #

• localStorage是浏览器提供的本地持久化存储API，数据除非手动清除，否则会一直保存在用户设备上
• JSON.stringify()：把数组转换成JSON字符串，解决localStorage不能直接存对象/数组的限制
• JSON.parse()：把读取到的字符串转回数组对象，这样Angular的*ngFor就能正常渲染图片

额外提示 #

• 你的HTML代码完全不需要修改，界面效果会和之前完全一致，只是现在刷新页面后，之前添加的图片再也不会消失啦
• 如果后续你的images数组有更新（比如图片URL修改），可以考虑只存储图片的id，初始化时再根据id从images数组里匹配完整对象（当前场景暂时不需要这么复杂）

内容的提问来源于stack exchange，提问作者Vadner