Passing large JSON object to another page in a new window.

Question

I apologize in advance if this has already been answered. I've Googled around for a few hours now, and I still haven't found anything that seems to answer my exact question.

Essentially, I have a very complex/highly styled view which is displaying user-specific data pulled from the database. I've captured the data as a JSON object, attached it to the body my page using .data(). I've added a button that retrieves the JSON object and opens my printer friendly page in a new window. I want to be able to access/manipulate the user-specific JSON object from within this new window. (This would all be on the same domain.)

Most of the solutions I've seen seem to be centered around opening a new, blank window. I don't want to do that. I've coded a layout for the page, and I plan on having javascript/css which also runs. I've seen solutions that involve opening a new window and then using document.write, which would be great, if there was a way to target a specific element on the new page. I've tried, for example:

x = window.open(url);
x.document.write(myJson);

Which does put the JSON object on the new page, but completely wipes everything else I had in the layout.

I've also seen solutions that suggest stringifying and then Base64 encoding the object. But I'm concerned about URL length restrictions, given that they could potentially be gathering a lot of data on this page before clicking the button.

I've also seen solutions that suggest using HTML5 local storage. Which I suppose I'll do, if there's no better solution. However HTML5 raises browser compatibility issues, and I'd prefer to avoid them if possible.

Here's some example code:

JSON object:

{ 
{
"name":"Percy Pea.",
"bio":"Percy Pea was born in a pod, and lived there happily."
},
{
"name":"James Cob",
"bio":"James Cob was arrested for stalking."
}
}

I capture that when it comes back from the server as 'data':

$("body").data( "userData", data);

In my onclick for the printer friendly page button, I retrieve the JSON object:

var userData = $("body").data("userData");

So is this doable? Is there so way to open a new window, and then insert/attach data to a specific element inside it? Or...maybe some other way I haven't even considered.

Thanks in advance for any help, although I will also be sure to check-mark the answer, once it's posted.

Answer 1

you can save the json in global variable in the parent window and reference it in your popup window code

https://stackoverflow.com/a/87737/1755374