如何保存数组元素状态？请求解决数组元素true状态持久化问题

先看你代码里的几个关键问题，这就是为什么true状态没被正确保存的原因：

1. 数组索引处理完全错误 #

你这段代码：

var xNum=JSON.parse(JSON.stringify("x"+this.counter));
this.x[xNum] = true;

完全是多余且逻辑错误的。你的数组x是按数字索引（0到12）存储元素的，而你生成的xNum是字符串比如"x1"——用字符串作为索引访问数组时，并不会修改你期望的对应位置元素（数组的索引是数字，字符串会被当成对象的额外属性，而非数组元素）。

你直接用this.counter作为索引就可以了，因为this.counter从0递增的话，正好对应数组0到12的位置。

2. 未在应用初始化时恢复存储状态 #

现在你只在点击按钮时保存数组，但应用重启后没有从storage加载之前保存的数组，所以默认还是初始的字符串数组，之前设置的true状态自然不会显示。

3. 计数器未初始化加载 #

如果不加载之前保存的Count值，每次重启应用counter都会从0开始，会重新覆盖之前的设置，导致状态混乱。

修正后的完整代码示例 #

假设你用的是Angular/Ionic的Storage服务，以下是修正后的代码：

第一步：初始化时加载存储的数据 #

在组件的初始化钩子（比如ngOnInit）里加载之前保存的数组和计数器：

import { Component, OnInit } from '@angular/core';
import { Storage } from '@ionic/storage'; // 或者你使用的其他存储服务

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  public x: any[] = ["x0", "x1", "x2", "x3", "x4", "x5", "x6", "x7", "x8", "x9", "x10", "x11", "x12"];
  public counter: number = 0;

  constructor(private storage: Storage) {}

  ngOnInit() {
    // 先加载计数器
    this.storage.get("Count").then((count) => {
      if (count !== null) {
        this.counter = count;
      }
      // 再加载数组状态
      this.storage.get('xArray').then((savedArray) => {
        if (savedArray !== null) {
          this.x = JSON.parse(savedArray);
        }
      });
    });
  }

第二步：修正按钮点击事件的逻辑 #

buttonclick() {
  // 防止计数器超过数组长度，避免越界报错
  if (this.counter >= this.x.length - 1) {
    console.log("所有元素已设置完成");
    return;
  }

  this.counter += 1;
  // 直接用计数器作为数组索引修改状态
  this.x[this.counter] = true;
  
  // 保存计数器和数组状态
  this.storage.set("Count", this.counter);
  this.storage.set('xArray', JSON.stringify(this.x));
}

额外注意点 #

• 一定要处理数组越界：当counter达到数组最后一个索引（12）时，停止递增操作，避免报错。
• 如果你的storage是异步服务（比如Ionic Storage），必须用then或者async/await处理加载逻辑，确保数据加载完成后再执行后续操作。
• 初始数组共13个元素（索引0到12），所以计数器的最大值应该是12，否则会修改数组范围外的位置。

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