功能点:页面数据汇总(上一步、下一步)

功能点:页面数据汇总(上一步、下一步)

适用场景:

通过上一步、下一步,逐步收集页面数据,然后在最后一步获取前面收集的页面数据

业务逻辑:

第一步:将页面数据保存在缓存中

第一个页面:this.chooseDates 表示:收集的页面数据

this.chooseDates.sex = '男'
this.chooseDates.age = '18'

localStorage.setItem("student", JSON.stringify(this.chooseDates));

第二步:然后在下一个页面获取缓存中的数据,然后将该页面的数据和缓存中的数据进行拼接,重新将数据保存在缓存中

第二个页面----最后一个页面:都是使用下面的代码。

this.chooseDates 表示:收集的页面数据

this.chooseDates.math = '良好'
this.chooseDates.english = '优秀'


// 第一步:先获取里面的数据--转换为对象形式。
let date1 = JSON.parse(localStorage.getItem("student"));
// 第二步:然后对象拼接--转换为字符串形式
let dateList = JSON.stringify(Object.assign(date1, this.chooseDates));
// 第三步:重新保存数据
localStorage.setItem("student", dateList);

第三步:在需要的地方,获取缓存中的数据

 // 获取localStorage里面的数据
 let dataList1 = JSON.parse(localStorage.getItem("student"));

你可能感兴趣的:(常用js方法,vue全家桶)