Storing A List Of Key Value Pairs In A Url Parameter, Javascript.

Assuming www.mydomain.com?param1=example as an example. What is the best way to store a second parameter that is a list of key value pairs? At the minute I use ¶m2=key|val

Solution 1:

PHP (and other server-side languages) support passing arrays in the query string.

www.mydomain.com?param1=example&param2[key1]=value1&param2[key2]=value2

PHP will parse the GET string as such:

array(2) {
  ["param1"]=>
  string(7) "example"
  ["param2"]=>
  array(2) {
    ["key1"]=>
    string(6) "value1"
    ["key2"]=>
    string(6) "value2"
  }
}

If you don't pass keys, it will be become a numeric array:

www.mydomain.com?param1=example&param2[]=value1&param2[]=value2

Will be parsed as:

array(2) {
  ["param1"]=>
  string(7) "example"
  ["param2"]=>
  array(2) {
    [0]=>
    string(6) "value1"
    [1]=>
    string(6) "value2"
  }
}

UPDATE: You can also parse the query string in JavaScript.

Here is a simple jQuery plugin I made:

$.parseQuery = function(str) {
    var ret = {};
    $.each(str.split("&"), function() {
        var data = this.split('='),
            name = decodeURIComponent(data.shift()),
            val = decodeURIComponent(data.join("=")).replace('+', ' '),
            nameVal = name.match(/(.*)\[(.*)\]/);

        if (nameVal === null) {
            ret[name] = val;
        }
        else {
            name = nameVal[1];
            nameVal = nameVal[2];
            if (!ret[name]) {
                ret[name] = nameVal ? {} : [];
            }
            if ($.isPlainObject(ret[name])) {
                ret[name][nameVal] = val;
            }
            elseif($.isArray(ret[name])){
                ret[name].push(val);
            }
        }
    });
    return ret;
};

Then you can do: $.parseQuery('param1=example&param2[]=value1&param2[]=value2');.

Solution 2:

A possible solution would be to escape the pipe and commas in the user input before posting them to your url.

That means sanitising the user input values and replacing | and , with something that doesn't break your code or just stripping them altogether.

Solution 3:

To prevent casual tampering, you could add a checksum and base-64 encode your values then encodeURIComponent() the resulting string. (See How can you encode to Base64 using Javascript? and A JavaScript CRC32.)

Of course, this won't prevent someone who's really determined from messing with your values, but it will slow down people who just like to twiddle URLs.

Solution 4:

When I think of serializing a list of key-value pairs, I immediately think of using a query-string.

For basics (JSON used to show deserialization):

foo=bar&foo=baz&fizz=buzz&alpha&beta=

is essentially:

{
    foo: [
        'bar',
        'baz'
    ],
    fizz: 'buzz',
    alpha: null,
    beta: ''
}

But special characters have to be escaped:

foo=bar%26baz

is essentially:

{
    foo: 'bar&baz'
}

What this means is that you can pass a query-string as a value in another query-string:

foo=bar%3Dbaz%26fizz%3Dbuzz

is essentially:

{
    foo: 'bar=baz&fizz=buzz'
}

And foo can be parsed to produce:

{
    bar:baz,
    fizz:buzz
}

---

That all being said, it's very easy to make mistakes while encoding/decoding, and as soon as you start double-encoding and double-decoding you're guaranteed to run into issues. If you can, use a single query string to contain all the necessary data, and don't embed a query-string within a query-string.