How to pass javascript object from one page to other

Question

I want to pass javascript object from one page to other page so anyone can tell me how to do it?

Is that possible to do so using jQuery?

Answer 1

Few ways

1. Server side postback

   Have a POST form on your page and save your serialized object inside a hidden input then post it to the other page. You will be able to process that data on the server and most likely put it back somehow into the page. Either as javascript object or anything else.

2. Client side URL examination

   Make a GET request to your other page by attaching your serialized object to URL as:

   http://www.app.com/otherpage.xyz?MyObject=SerializedData

   That other page can then easily parse its URL and deserialize data using Javascript.

3. What's in a window.name = local cross-page session

   This is a special technique that's also used in a special javascript library that exposes window.name as a dictionary, so you can save many different objects into it and use it as local cross-page-session. It has some size limitations that may affect you, but check the linked page for that and test your browsers.

4. HTML5 local storage

   HTML5 has the ability of local storage that you can use exactly for these purposes. But using it heavily depends on your browser requirements. Modern browsers support it though and data can be restored even after restarting browsers or computers...

5. Cookies

   You can always use cookies but you may run into their limitations. These days cookies are not the best choice even though they have the ability to preserve data even longer than current window session.

Javascript object serialization

You will of course have to use some sort of a (de)serializer on your client side in some of the upper cases. Deserializers are rather easy to find (jQuery already includes a great function $.getJSON()) and are most likely part of your current javascript library already (not to even mention eval()).

But for object to JSON string serialization I'd recommend json2.js library that's also recommended by John Resig. This library uses in-browser implemented JSON (de)serialization features if they exist or uses it's own implementation when they don't. Hence recommendation.

Answer 2

That is only possible if the pages exist at the same time, and one page is opened from the other so that you have a reference to the other pages windows object.

If you navigate from one page to another, they don't exist at the same time, so you can't communicate like that. You would have to serialise the object into a string that you can send along in the request, for example sending JSON in the query string.

There are different ways of persisting data, like in the query string, post data, cookies, window name or HTML5 local storage, but all those methods can only persist string values, not Javascript objects.

Answer 3

I believe that the only way to pass a javascript object from one page to another is to serialize it into string and pass it in url. For example if you have object

var temp = { id: 1, value: 'test' }

you may want to use JSON-js to serialize it and pass it in for example http://mysite.com/?data=serialization. Then after you load the page you need to deserialize it via for example $.parseJSON().

Answer 4

I wrote a library some time ago, that can store most js objects to localstorage. For example instances of your prototype classes, with references to other objects, self references included. Bare in mind that IE support is lackluster.

Answer 5

This is possible to do, and you have a couple of options.

Local Storage

Can be added/eddited/removed at any stage and accessed across a domain. (doesn't work natively in ie6 and ie7 however there are work arounds for that)

The Window Object

I would put a massive cavet around this not being the best solution, it's not at all secure, so only use it for things that don't need to be kept private. window.name = { "json" : "object"} which is then available in the following page in the window.name property.

Answer 6

In Javascript, normally all variables only exist in a scope that is unique to that page load. They don't persist between different pages if there is a new page load.

The exceptions to this are

1. Cookies.
2. Local storage.

Cookies are truly cross-browser but are extremely limited in terms of size. You shouldn't expect to be able to store more than 4kB of cookies for a page reliably; in fact you probably shouldn't be using any more than 1kB. Cookie data slows down the loading of every page and other request, so it should be used sparingly.

There are various types of local storage available to Javascript, but the only practical cross-browser implementation of this is HTML5 webstorage which is implemented in all modern browsers (IE8+, FF, Chrome, Safari, etc), but is notably not implemented in IE6 or IE7, if that matters.

Both these approaches store a value in the user's browser which can be made to be persistent so that it can be written to and read from by pages from the same site, even between page views (and even, often, between browser sessions or computer reboots).