用javascript发送对象作为浏览器url的查询参数的最佳方法是什么？

Question

我正在用javascript做一个项目，在这个项目中，用户可以添加多个过滤器，通过层次结构等向下钻取来搜索数据。一旦用户向下钻取，添加过滤器并得到一些结果，我希望用户能够将这些结果作为一个网址分享给其他人。现在，搜索查询将是一个复杂的对象，我想把这个查询作为浏览器url的一部分发送。我知道有多种方法可以做到这一点。但最好的方法是什么？

下面是一个查询的例子

{
    "category": 1,
    "categoryDetails": {
        "id": 1,
        "name": "category 321"
    },
    "start": "2020-03-20",
    "end": "2020-05-05",
    "filters": [{
        "key": "viewby",
        "value": "something",
        "label": "something else"
    }, {
        "key": "color",
        "value": "0",
        "label": "black"
    }, {
        "key": "color",
        "value": "1",
        "label": "blue"
    }, {
        "key": "color",
        "value": "2",
        "label": "white"        
    }, {
        "key": "tags",
        "value": "cl",
        "label": "clean"
    }, {
        "key": "tags",
        "value": "wi",
        "label": "winter"
    }]
}

我知道我可以将json对象字符串化，然后将其发送到

url = `/search?query="{\"category\":1,\"categoryDetails\":{\"id\":1,\"name\":\"category 321\"},\"start\":\"2020-03-20\",\"end\":\"2020-05-05\",\"filters\":[{\"key\":\"viewby\",\"value\":\"something\",\"label\":\"something else\"},{\"key\":\"color\",\"value\":\"0\",\"label\":\"black\"},{\"key\":\"color\",\"value\":\"1\",\"label\":\"blue\"},{\"key\":\"color\",\"value\":\"2\",\"label\":\"white\"},{\"key\":\"tags\",\"value\":\"cl\",\"label\":\"clean\"},{\"key\":\"tags\",\"value\":\"wi\",\"label\":\"winter\"}]}"{\"key\":\"tags\",\"value\":\"winter\",\"label\":\"winter\"}]}"

或者将其转换为base64字符串

url = `search?query=ewogICAgImNhdGVnb3J5IjogMSwKICAgICJjYXRlZ29yeURldGFpbHMiOiB7CiAgICAgICAgImlkIjogMSwKICAgICAgICAibmFtZSI6ICJjYXRlZ29yeSAzMjEiCiAgICB9LAogICAgInN0YXJ0IjogIjIwMjAtMDMtMjAiLAogICAgImVuZCI6ICIyMDIwLTA1LTA1IiwKICAgICJmaWx0ZXJzIjogW3sKICAgICAgICAia2V5IjogInZpZXdieSIsCiAgICAgICAgInZhbHVlIjogInNvbWV0aGluZyIsCiAgICAgICAgImxhYmVsIjogInNvbWV0aGluZyBlbHNlIgogICAgfSwgewogICAgICAgICJrZXkiOiAiY29sb3IiLAogICAgICAgICJ2YWx1ZSI6ICIwIiwKICAgICAgICAibGFiZWwiOiAiYmxhY2siCiAgICB9LCB7CiAgICAgICAgImtleSI6ICJjb2xvciIsCiAgICAgICAgInZhbHVlIjogIjEiLAogICAgICAgICJsYWJlbCI6ICJibHVlIgogICAgfSwgewogICAgICAgICJrZXkiOiAiY29sb3IiLAogICAgICAgICJ2YWx1ZSI6ICIyIiwKICAgICAgICAibGFiZWwiOiAid2hpdGUiICAgICAgICAKICAgIH0sIHsKICAgICAgICAia2V5IjogInRhZ3MiLAogICAgICAgICJ2YWx1ZSI6ICJjbCIsCiAgICAgICAgImxhYmVsIjogImNsZWFuIgogICAgfSwgewogICAgICAgICJrZXkiOiAidGFncyIsCiAgICAgICAgInZhbHVlIjogIndpIiwKICAgICAgICAibGFiZWwiOiAid2ludGVyIgogICAgfV0KfQ==

有没有更好的做法？在做这件事的时候有哪些最佳实践？

Answer 1

什么都可以，但最好避免使用斜杠。encodeURI 函数。

const params = {
    "category": 1,
    "categoryDetails": {
        "id": 1,
        "name": "category 321"
    },
    "start": "2020-03-20",
    "end": "2020-05-05",
    "filters": [{
        "key": "viewby",
        "value": "something",
        "label": "something else"
    }, {
        "key": "color",
        "value": "0",
        "label": "black"
    }, {
        "key": "color",
        "value": "1",
        "label": "blue"
    }, {
        "key": "color",
        "value": "2",
        "label": "white"        
    }, {
        "key": "tags",
        "value": "cl",
        "label": "clean"
    }, {
        "key": "tags",
        "value": "wi",
        "label": "winter"
    }]
};

const url = `/search?query=${encodeURI(JSON.stringify(params))}`;

/search?query=%7B%22category%22:1,%22categoryDetails%22:%7B%22id%22:1,%22name%22:%22category%20321%22%7D,%22start%22:%222020-03-20%22,%22end%22:%222020-05-05%22,%22filters%22:%5B%7B%22key%22:%22viewby%22,%22value%22:%22something%22,%22label%22:%22something%20else%22%7D,%7B%22key%22:%22color%22,%22value%22:%220%22,%22label%22:%22black%22%7D,%7B%22key%22:%22color%22,%22value%22:%221%22,%22label%22:%22blue%22%7D,%7B%22key%22:%22color%22,%22value%22:%222%22,%22label%22:%22white%22%7D,%7B%22key%22:%22tags%22,%22value%22:%22cl%22,%22label%22:%22clean%22%7D,%7B%22key%22:%22tags%22,%22value%22:%22wi%22,%22label%22:%22winter%22%7D%5D%7D

json和base64没有什么区别，只是对你的可用性，它们都是编码数据。