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

·  阅读 4178

前端在开发单页应用(spa)的时候总会遇到页面之间传递参数的情况,在一般的情况下对于数据的传递,我们可以用vuex,redux等中心化的状态管理方案。但今天要讲的是一种特殊的情况: 页面刷新导致传递的参数丢失

如何在页面刷新的时候保留数据?

1.路由传参

我想到的第一种方案是路由传参,在Vue项目里,路由插件vue-router提供了两种传递参数的方法:paramsquery。具体的使用方式这里不详细展开,不懂的可以去看vue-router文档paramsquery传参,其路由展现形式是不一样的:

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改