页面数据传递方案思路

背景

在做移动端开发时，页面 A 中的一些数据需要跳转到 B 页面进行创建，由于是不同页面，从 B 页面返回 A 页面，会导致 A 页面的数据被清空，这个时候需要对 A 页面的数据进行暂存。

实现方案

数据暂存的地方能选择的有内存中、Cookie、localStorage、SessionStorage，以及IndexDB。我选择的方案，与存储地点无关，主要是在页面离开时进行数据存储，在进入页面时读取并清空数据。

适用于离开前需要暂存，返回时需要读取的数据。

存储数据

定义数据存储逻辑。

setStorageData() {
  localStorage.setItem(LAST_DATA, JSON.stringify(this.detail))
  this.$store.commit('saveList', JSON.parse(JSON.stringify(this.detailList)))
}
复制代码

跳转前存储数据

jumpToEditDetail() {
  this.setStorageData();
  this.$router.push({
    path: `/newPath`
  });
}
复制代码

返回页面加载并清空数据

mounted() {
  const isBack = this.readAndClearStorage();
  if (isBack) {
    this.getDetailSrcUrl();
    return;
  }
  this.getDraftDetail();
}

readAndClearStorage() {
  const str = localStorage.getItem(LAST_DATA);
  const lastData = JSON.parse(str)
  let isBack = false;
  if (str !== '{}') {
    this.detail = lastData;
    isBack = true;
  } else {
    this.detail = this.getDefaultDetail();
  }
  localStorage.setItem(LAST_DATA, '{}')

  this.detailList = JSON.parse(JSON.stringify(this.newList))
  this.$store.commit('saveList', [])

  return isBack;
}
复制代码

总结

该设计思路将数据的存储、读取以及清理逻辑都置于一个组件内，目标页面无需操心相关的逻辑。

对于整个系统都需要读取的数据，理应在整个系统初始化时就存放在内存中，在读取时统一从内存中进行读取，以避免系统中充斥着 storage 相关的代码。