How can I take the user to a new page, along with some variables, using Javascript/jQuery, without causing a URI Too Large error?

Question

Using Javascript/jQuery, I need to take the user to a new page when a button is clicked, and also send along a bunch of variables to the new page. At the moment I'm doing it like this:

location.href=window.location.href + '/new_note?id='+$('#note_id').val()+'&note_subnotes='+encodeURIComponent(window.JSON.stringify(sub_notes))

This works okay, but the problem is that sub_notes is an array of hashes, which can get pretty large. If I have more than a few hashes in the array, I get this error:

Request-URI Too Large
WEBrick::HTTPStatus::RequestURITooLarge 

So obviously the URI is too big. How can I do this without running into this problem? Thanks for reading.

Answer 1

Use a cookie for your long string. Stock the data into a cookie, and get it on the next page.

Answer 2

You could send the data using POST or GET. I'd imagine post can handle much more data, with it being used to upload files and all.

Answer 3

Sending page:

var form = $('<form>')
    .attr('action', url)
    .attr('method', 'POST')
    .append($('<input type="hidden">')
        .attr({
            'id': 'data',
            'name': 'data',
            'value': JSON.stringify(data)
        })
    )
    .appendTo(document.body)
    .submit()
    .remove();

(hooray for jQuery chaining)

Receiving page (PHP required):

var data = <?php echo @$_POST['data'] or 'null' ?>