前端在开发单页应用(spa)的时候总会遇到页面之间传递参数的情况，在一般的情况下对于数据的传递，我们可以用vuex，redux等中心化的状态管理方案。但今天要讲的是一种特殊的情况: 页面刷新导致传递的参数丢失。
如何在页面刷新的时候保留数据?
1.路由传参
我想到的第一种方案是路由传参，在Vue项目里，路由插件vue-router提供了两种传递参数的方法：params和query。具体的使用方式这里不详细展开，不懂的可以去看vue-router的文档。params和query传参，其路由展现形式是不一样的：
// params 传参
test.com/page/123
// query 传参
test.com/page?id=123&age=23
复制代码从demo里可以看到vue-router会将参数直接放到页面的url里，当用户刷新页面的时候，url并不会改变，所以传递的参数也不会变。获取参数的方法也很简单：
// 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攻击，避免敏感信息的泄露。其他几种存储方式就不介绍了，毕竟不是本文的重点，感兴趣的可以自己去了解。
3.总结
使用sessionStorage也是有缺点的，如果用户拷贝了当前页面的路由，在另一个浏览器里打开页面，这样就不能获取到从上一个页面传递过来的参数了。以上两种方案都有优缺点，在使用的时候需要根据具体的场景选择合适的方案。
