前端在开发单页应用(spa) 的时候总会遇到页面之间传递参数的情况，在一般的情况下对于数据的传递，我们可以用vuex，redux等中心化的状态管理方案。但今天要讲的是一种特殊的情况: 页面刷新导致传递的参数丢失。以下是几种保存刷新前页面数据的方法。
1、路由传参
由于刷新页面，其url是不会改变，所以可将其刷新前页面的数据放在url参数中，vue路由提供了params和query两种路由传参的方式。
// params 传参
test.com/page/123
// query 传参
test.com/page?id=123&age=23
获取参数的方法
// params 获取路由参数
const { id } = this.$route.params
// query 获取路由参数
const { id, age } = this.$route.query
将参数放到路由里来传递，确实是一个不错的方案，但这种方案有缺点。浏览器对url的长度是有限制的（不同的浏览器限制不同），如果我们要传的参数在url里的长度超出了浏览器的限制就会出现问题。
2、sessionStorage
第二种方案是使用sessionStorage,sessionStorage是前端数据可持久化的一种方案，其他的还有localStorage，cookie，indexDB，ServiceWork。当页面跳转的时候，将需要传递的参数存入sessionStorage里。
const data = {id: 123, age: 23}; // 需要传递的参数
// sessionStorage存值
sessionStorage.setItem('_data', JSON.stringify(data));
// sessionStorage取值
JSON.parse(sessionStorage.getItem('_data'));
可能有同学会问，为什么不用localStorage和剩下的几种方式。因为sessionStorage里的数据会随着页面的关闭而销毁，而localStorage里的数据是不会随着页面的关闭而销毁的，这样的话随着项目的迭代，使用localStorage的地方越来越多，存储的数据量会越来越大导致超出浏览器限制的5M存储空间，而且sessionStorage还可以规避XSS攻击，避免敏感信息的泄露。
缺点：使用sessionStorage也是有缺点的，如果用户拷贝了当前页面的路由，在另一个浏览器里打开页面，这样就不能获取到从上一个页面传递过来的参数了。以上两种方案都有优缺点，在使用的时候需要根据具体的场景选择合适的方案。
