页面数据传递方案思路
背景
在做移动端开发时，页面 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 相关的代码。
作者：Wetoria
链接：https://juejin.cn/post/7034051658329882661