Ionic应用修改.ts文件数据并实现持久化保存的方法

当然可以解决这个问题！你现在的问题根源在于，你直接修改的是cards.ts里的静态常量数据——这些数据在应用打包后就固定了，修改只会存在于当前应用的内存中，一旦重启就会恢复成原始值。要让修改持久化，你需要用Ionic/Capacitor提供的本地存储方案来保存用户的更改。

1. 安装Capacitor Storage插件 #

Ionic 6及以上版本推荐使用Capacitor官方的Storage插件，它能跨平台（Web/iOS/Android）实现持久化存储：

npm install @capacitor/storage
npx cap sync

2. 初始化卡片数据 #

不要直接把cards.ts的静态数据当作应用的唯一数据源，而是在应用启动时优先读取本地存储的用户数据，没有的话再用初始数据：

import { Storage } from '@capacitor/storage';
import defaultCards from './cards';
import { Card } from './cards.interface';

// 在你的组件或服务中
async loadCards() {
  // 尝试从本地存储读取已保存的卡片数据
  const storedCards = await Storage.get({ key: 'userCards' });
  
  if (storedCards.value) {
    // 本地有保存的数据，用这个数据
    this.cards = JSON.parse(storedCards.value) as Card[];
  } else {
    // 第一次启动应用，用初始数据
    this.cards = [...defaultCards.cards];
    // 同时把初始数据存入本地存储，方便后续读取
    await Storage.set({
      key: 'userCards',
      value: JSON.stringify(this.cards)
    });
  }
}

3. 修改数据后立即保存到本地 #

修改你的getRandom()函数，每次更新displayed值后，把整个卡片数组同步到本地存储：

async getRandom() {
  this.answerVisible = false;
  this.availableCards = this.cards.filter(card => !card.displayed);

  // 处理所有卡片都已展示的情况
  if (this.availableCards.length === 0) {
    console.log('所有卡片都已经展示过啦！');
    // 可选：这里可以添加重置逻辑，或者提示用户
    return;
  }

  let rd = Math.floor(Math.random() * this.availableCards.length);
  this.randomCard = this.availableCards[rd];
  
  // 找到目标卡片并修改displayed值
  const targetCard = this.cards.find(card => card.id === this.randomCard.id);
  if (targetCard) {
    targetCard.displayed = true;
    // 保存修改后的数组到本地存储
    await Storage.set({
      key: 'userCards',
      value: JSON.stringify(this.cards)
    });
  }
}

4. 在应用启动时加载数据 #

在组件的初始化生命周期钩子中调用loadCards()，确保每次打开应用都能读取到最新的用户数据：

async ngOnInit() {
  // 页面初始化时加载卡片数据
  await this.loadCards();
}

• Capacitor Storage会根据平台自动选择合适的存储方式：Web端用localStorage，iOS用UserDefaults，Android用SharedPreferences，都是持久化的
• 如果需要给用户提供重置卡片状态的功能，只需要把defaultCards.cards重新存入userCards这个key即可
• 注意数据的序列化/反序列化：因为存储的是JSON字符串，所以要确保Card接口的所有字段都能被正确序列化

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