前端在开发单页应用(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
也是有缺点的,如果用户拷贝了当前页面的路由,在另一个浏览器里打开页面,这样就不能获取到从上一个页面传递过来的参数了。以上两种方案都有优缺点,在使用的时候需要根据具体的场景选择合适的方案。