localStorage数组持久化问题求助：页面刷新后数组重置

你的问题出在组件初始化时没有从localStorage读取已保存的数组：每次页面刷新，组件重新创建，diaAnterior会被重置为空数组，此时执行push操作会把新值存入空数组，覆盖掉localStorage里之前的旧数据。

修复步骤： #

1. 组件初始化时加载localStorage数据
   在组件的created钩子中，读取localStorage中保存的数组，赋值给diaAnterior，确保刷新后数组能恢复之前的状态。
2. 处理数值类型问题（额外优化）
   输入框的默认值是字符串类型，直接相加会导致字符串拼接而非数值求和，需要把每个值转成数字后再计算。

修改后的完整代码： #

export default {
  name: 'Form-main',
  data: () => ({ 
    uno: null,
    dos: null,
    cinco: null,
    diez: null,
    veinte: null,
    cincuenta: null,
    cien: null,
    docientos: null,
    quinientos: null,
    resultado: null,
    dialog: false,
    diaAnterior:[],
    ayer:[]
  }),
  // 新增created钩子，初始化时读取localStorage
  created() {
    const savedData = localStorage.getItem('resultado');
    if (savedData) {
      this.diaAnterior = JSON.parse(savedData);
      this.ayer = this.diaAnterior; // 同步ayer的值
    }
  },
  methods:  {
    submit() {
      this.sumaMonedas();
      this.reset();
      this.guardarDiaAnterior();
    },

    sumaMonedas() {
      // 把每个值转成数字（空值时取0），避免字符串拼接
      this.resultado = 
        Number(this.uno || 0) + 
        Number(this.dos || 0) + 
        Number(this.cinco || 0) + 
        Number(this.diez || 0) + 
        Number(this.veinte || 0) +
        Number(this.cincuenta || 0) + 
        Number(this.cien || 0) + 
        Number(this.docientos || 0) + 
        Number(this.quinientos || 0);
      this.dialog = true;
    },

    guardarDiaAnterior() {
      this.diaAnterior.push(this.resultado);
      localStorage.setItem('resultado', JSON.stringify(this.diaAnterior));
      this.ayer = JSON.parse(localStorage.getItem('resultado'));
    },

    reset() {
      this.uno = null;
      this.dos = null;
      this.cinco = null;
      this.diez = null;
      this.veinte = null;
      this.cincuenta = null;
      this.cien = null;
      this.docientos = null;
      this.quinientos = null;
    }
  },
}

关键说明： #

• created钩子在组件实例创建后立即执行，此时读取localStorage能保证diaAnterior在后续操作前已经加载了之前保存的数据。
• 使用Number(value || 0)处理输入值：如果输入为空（null），则取0参与计算，避免出现NaN的求和结果。

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