在url get参数中传递大量数据参数的解决方案

问题

为什么我一定要在url get参数里传递大量参数,而不使用post提交呢?

由于实际项目实现了前后端分离,前端是vue框架开发,而且也并没有做成单页应用,所以会出现两个页面需要大量传递参数的情况。

思考

传统的get参数,将数据使用a=1&b=2的格式传递。

这个方法有一个缺点,如果是对象、数组的情况下参数会是这样的:a[0][id]=1&a[0][name]=aaa&a[1][id]=1&a[1][name]=aaa。

如果数据格式复杂一些,那url长度会非常长。虽然现代浏览器和服务器支持的url长度还不算短,但是这样既不美观,也使得url中有过多冗余字符,不好。

接下来我灵光一现,想到了数据压缩!

解决

于是我找到了lz-string,这是一个js的数据压缩解压库。

用法:

var data = {
    id: 1,
    name: '啊啊啊',
    list: [
        {name: 'a'},
        {name: 'b'},
        {name: 'c'},
    ],
};
// 数据加密
var compressResult = LZString.compressToBase64(JSON.stringify(data));
// 加密结果:N4IglgJiBcCMA0IB2BDAtgUxiQUqp5IgDZgDOALjANqiqbYogC+8N6W0IARky8m9gGMmAXUZA===
// 数据解密
var decompressResult = JSON.parse(LZString.decompressFromBase64(compressResult));
console.log(data, compressResult, decompressResult);

最后,我传参先进行数据加密,以这样的方式传参:/?data=加密结果的base64

在接收参数的页面中,从get参数中获取data后进行解密。

这样就解决了问题,而且url变得好看又安全!

  • 发表评论
当前用户:
  • 评论列表