Angular使用localStorage存多步表单时新数据覆盖旧数据问题求解

问题根源 #

你当前代码存在两个核心错误：

1. 第一步存入localStorage的quizData是普通对象类型（表单value默认是对象），普通对象本身没有push方法，调用push本身就会执行异常。
2. 即使test是数组，push方法的返回值是数组的新长度，不是更新后的数组本身，你把返回的长度值存进localStorage，自然会覆盖原有数据。

方案1：两步表单数据合并为单个对象（推荐适配你的业务场景） #

你的两步表单都是收集同一个用户的信息，合并为单个对象存储更合理，调整代码如下：

第一步表单提交代码不用改，保持原有逻辑即可： #

submit() {
    localStorage.setItem('quizData', JSON.stringify(this.form.value));
    console.log(JSON.stringify(this.form.value));
}

第二步表单提交代码修改为对象合并逻辑： #

submit() {
    // 取出原有第一步的存储数据
    const prevData = JSON.parse(localStorage.getItem('quizData') || '{}');
    // 合并原有数据和第二步的新表单数据，同名属性会默认用第二步的新值
    const updatedData = {...prevData, ...this.form.value};
    // 存回localStorage
    localStorage.setItem('quizData', JSON.stringify(updatedData));
    console.log(updatedData);
}

方案2：如果需要存储为数组形式（适合多组问卷的场景） #

如果你的业务是要存储多份问卷数据，那第一步就要存成数组格式，调整如下：

第一步表单提交代码调整： #

submit() {
    // 初始化就存数组
    const quizList = JSON.parse(localStorage.getItem('quizData') || '[]');
    quizList.push(this.form.value);
    localStorage.setItem('quizData', JSON.stringify(quizList));
    console.log(JSON.stringify(this.form.value));
}

第二步表单提交代码调整： #

submit() {
    const quizList = JSON.parse(localStorage.getItem('quizData') || '[]');
    // 取数组最后一项（也就是第一步刚存的那份数据）合并第二步的信息
    if(quizList.length > 0) {
        quizList[quizList.length - 1] = {...quizList[quizList.length - 1], ...this.form.value};
    }
    localStorage.setItem('quizData', JSON.stringify(quizList));
    console.log(quizList);
}

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