uni-app 利用localStorage进行页面间数据传递

需求：两个页面，第一个页面是数据的列表，有几项数据可以进行修改，第二个页面某个列表数据的详情页，相应的几项数据也可以进行修改，要求不管是那个页面的哪个数据进行修改，两个页面都要同步变化

关键点：对数据修改后，一定要覆盖原来的数组或者对象------页面数据同步变化
得到的数据，页面显示一份，保存在缓存中一份-----页面间数据的传递和同步

效果：


页面部分就省略了，布局比较简单，主要是逻辑部分
列表页逻辑：

export default{
  data(){
  return{
     detailList:[],     //保存后台得到的列表数组
     
     }
  },
  onReady() {
		this.detailList = uni.getStorageSync('pp-detailList')  //从详情页返回，重新加载列表
	},
  methods:{
  //该页面的一顿数据操作，具体看需求
    cal(e){
     if (e >= 0) {
		if (this.keyData.type == 'price') {
			this.detailList[this.keyData.index].price = Number(e);
			this.detailList[this.keyData.index].taxPrice = (Number(e) * (
						1 + this.detailList[this.keyData.index].taxRate)).toFixed(2);
			} else if (this.keyData.type == 'taxPrice') {
					this.detailList[this.keyData.index].taxPrice = Number(e);
					this.detailList[this.keyData.index].price = (Number(e) / (
						1 + this.detailList[this.keyData.index].taxRate)).toFixed(2);
				}
				this.detailList = [...this.detailList];  //这里是关键，对原数组做了操作后，一定要覆盖原来的数组，这样页面才能同步显示
				uni.setStorageSync('pp-detailList', this.detailList) //下一个页面也可以获得和操作
			}
     }
  //跳转到具体的物资明细
	goMaterial(item, index) {
			uni.setStorageSync('pp-material', item);
			this.$u.route({
				url: `/pages/pp/material/material?index=${index}`    //index列表数组中的下标
			})
		},
  }
}

某个数据详情页

export default {
	data() {
		return {
			oData: '',     //缓存部分某个物质对象--用于页面展示
			detailList:[] ,//物质列表--用于同步改缓存中数据
			index:'',      //判断是数组中那条对象进行了修改
			}
		},
    onLoad(option) {
		this.oData = uni.getStorageSync('pp-material');  //单个对象
		this.detailList=uni.getStorageSync('pp-detailList')  //物资列表
		this.index=option.index
	},
	onShow(){
		this.oData = uni.getStorageSync('pp-material');  //单个对象
		this.detailList=uni.getStorageSync('pp-detailList')  //物资列表
	},
	methods:{
	  //该页面的一顿数据操作，具体看需求
    cal(){
     if (e>=0){
			if(this.keyData.type=='price'){
			  this.oData.price=Number(e)
			  this.detailList[this.index].price = Number(e);
			  this.detailList[this.index].taxPrice=(Number(e) * (
						1 + this.detailList[this.index].taxRate)).toFixed(2);
			  this.oData.taxPrice=(Number(e) * (
						1 + this.detailList[this.index].taxRate)).toFixed(2);
					
			}else if(this.keyData.type=='taxPrice'){
				this.detailList[this.index].taxPrice = Number(e);
				this.oData.taxPrice = Number(e);
				this.oData.price=(Number(e) / (
						1 + this.detailList[this.index].taxRate)).toFixed(2);
				this.detailList[this.index].price=(Number(e) / (
						1 + this.detailList[this.index].taxRate)).toFixed(2);
				}
				this.oData={...this.oData}    //关键：对原对象做了操作后，一定要覆盖原来的对象，这样页面才能同步显示
				this.detailList=[...this.detailList]  //关键：同步修改数组
				uni.setStorageSync('isp-pqMaterialList',this.detailList) //关键：把数组再保存到缓存中，方便回到列表页，可以同步更新数据
			}
    }
   }
  }