前端单页应用在页面刷新后保留数据的解决方案

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