How does global Javascript object save state?

Question

/**************************************************************************
 *
 * Function:    toggleVis
 *
 * Description: Following Function hides and expands the main column.
 *              
 *
***************************************************************************/
// Set the default "show" mode to that specified by W3C DOM
// compliant browsers

  var showMode = 'table-cell';


// However, IE5 at least does not render table cells correctly
// using the style 'table-cell', but does when the style 'block'
// is used, so handle this

  if (document.all) showMode='block';

// This is the function that actually does the manipulation

var States = { };

function toggleVis(col){

    if (!States[col] || States[col].IsOpen == null)
    {
        States[col] = {isOpen : true}; // This assumes the cell is already shown
        //States[col] = {isOpen : false}; // This assumes the cell is already hidden
    } 

    //mode =  States[col].IsOpen ? showMode : 'none';
    mode =  States[col].IsOpen ? 'none' : showMode; //starts from closed, next click need open

    cells = document.getElementsByName(col);
    for(j = 0; j < cells.length; j++) cells[j].style.display = mode;

    States[col].IsOpen = !States[col].IsOpen;
}

This function hides and displayed a column for a html table. When I call this function the object States toggles accordingly, true if expanded, false if hidden or none. After the function is executed once, what saves the last state of States so that it can be used in this function, when called again? Is it because the object States{} is declared as a global?

Answer 1

Absolutely correct. States is declared in the global namespace and is available to all javascript functions (that don't hide it with a variable of the same name). It will retain it's value outside of any function that uses it.

Answer 2

Global variables in javascript are active until the page is refreshed or unloaded.

Answer 3

Yes. You define States in the outermost closure, which means it's actually a property of the window object as well, that is, window.States === States. However, were you to define a function like

function foo(param) {
    var States = param;
}

it would not affect the global States variable, since you are defining it anew as a local for that function. (But you can access the global States variable, too, by using window.States within that function.)

Answer 4

yes, they are (active until refresh); this is my problem; i save all my popups (i.e. unsaved input-Forms) in a global array, but after refresh, i cant retreive my popups, because the content of my popup-array is empty; is there a region in the browser, where i can store datastructures browser-wide?