JavaScript objects and persistence through dialogs

Question

Hi,

Rather simple question here. I want to create an JS object that has a property, say, name. I want to create that object and be able to use it throughout my page. For example, what I have now doesn't work:

var item = new Object();
function makeItem(title) { 
   item.name = title;
}

Inside a modal dialog:

makeItem("test");
alert(item.name); // returns "test"

Once I close the dialog, however, all of the information related to item is gone. For example, I can't go ahead and see if item.name contains anything the next time I try to create the same dialog.

Nothing is currently inside a document.ready().

Clearly I'm not fully capturing the idea of the DOM. S|O, would you mind enlightening my poor brain?

Thanks!

Answer 1

As Jon correctly states, more details and code would help understanding your situation.

From your symptoms though I'm guessing you have a dialog.html page with the script trying to "makeItem" and this dialog.html is loaded in a frame or even a separate browser window/tab each time you "open the dialog".

A little theory

In browsers all JavaScript objects and code "belong" to one of the open "pages". A page may be open as a top-level page in a browser tab or a separate window, or in a frame (in which case it appears to be part of its parent page, but its JS is still separated from the parent).

Each open page its own "global object", which is commonly referred to as window. The global functions and variables you define at the top level in a <script> are attached as properties on this global object.

When you open the same page twice (simultaneously -- in two tabs side by side -- or closing the first one before opening the second copy), each copy gets its own global object, completely separate code and objects.

Generally when a page is closed, the global object of that page and all its properties (including any objects and functions) are destroyed.

This is why item in your example loses its properties when you close and re-open the dialog (assuming my initial guess was correct).

References to another window

The proper fix to your problem depends on what you're trying to achieve.

If you need to communicate from the opener page to the opened dialog and back, you can save the reference from the window.open() call:

var w = window.open(...dialog URL...);

After the dialog is loaded, w will point to the dialog's global object and you'll be able to poke it. Similarly, from the dialog you can access the global object of the page that opened the dialog via window.opener.

So you can create item in the opener's context by putting the following in the dialog's <script>:

opener.item = {title: "test"};

...and it will live as long as the opener page.

Real persistence

If you need real persistence (e.g. across browser restart), your only options until recently were cookies or server-side storage. In modern browsers you can use Web storage (localStorage, sessionStorage objects) for that.