storing/fetching/changing javascript variables

[ricmetal]

hi
so
i got to the point where i need to store info, regarding whether a div has been expanded.
my idea is to have a variable hold the info on several divs, created dynamically, so when the user expands the div for the first time, it loads something through ajax.
second time around expanding the div, i need to tell my application not to load the ajax content because it has already been loaded.
so,
now,
what is the best way to do this?
i cannot declare a global variable for each div on page load, because the divs are going to be attached through ajax (also), and there seems to be some conflicts with declaring global variables from within functions (if this wouldnt be the case, id just run a function each time a div is created and declare a global variable for that div)
so, whats the best way to achieve what im after?

cheers

[jscheuer1]

If I understand you correctly, ie: you want a page to remember what the user did on it and do something based upon that the next time they visit the page, if that's what you want, unless you have a server side language like PHP or asp and a database entry for each user who must log in each time they visit, you have only two options. Those are cookies and local storage.

So, is that what you want?

As a side note, javascript globals can be declared within a function. There are good ways and not so good ways to do that.

However, once the user leaves the site, unless you have them in your server's database (requires a server side language - javascript cannot do this), or set a cookie (via javascript and/or a server side language) or local storage item (also via javascript and/or a server side language) on their computer, there's no way to recall anything about their last visit.

Note: Both cookies and local storage require that the user has a browser that's capable of accepting these and has that capability enabled. Fortunately, most do. But this is obviously not something you can use for anything commercial or otherwise 'mission critical' in any way. For those sorts of things you need a server side language, log ins and a database, probably an ssl (secure socket layer - https) as well.

[ricmetal]

thanks john for your reply
i only need to store the info while the user is on the page.
as soon as they move to another page the info can be cleared.

so i guess using variables in enough.
so, how would i go about declaring global variables from within a function, without having the chance they conflict with the application?

[jscheuer1]

The simplest and perhaps the worst way of declaring a global within a function is to declare it informally within the function:

function dosomething(){
	dosomethingrun = true;
}

dosomething();

alert(dosomethingrun); //alerts 'true', unless this is IE and there's an element in the parsed DOM
// with a name or id of 'dosomethingrun', then it will alert 'object' and be a reference to that element

That's bad enough, but this is also a possible scenario:

function dosomething(){
	dosomethingrun = true;
}

alert(dosomethingrun); // throws an error and stops script processing in some, perhaps all browsers

Any informally declared global has a chance of conflicting with another global of the same name and/or the DOM in IE which creates its own globals via the implied document.all collection.

The first conflict can be avoided by careful coding, use a unique name for each global.

The second can be avoided by formally declaring the variable in the global scope, ex:

var dosomethingrun;

function dosomething(){
	dosomethingrun = true;
}

alert(dosomethingrun); //alerts 'undefined'

dosomething();

alert(dosomethingrun); //alerts 'true'

There's a better way. Since you want to declare this global inside a function and have it be available outside the function, you may make it a property of the function, ex:

function dosomething(){
	dosomething.run = true;
}

alert(dosomething.run); //alerts 'undefined'

dosomething();

alert(dosomething.run); //alerts 'true'

It's no longer truly a global, yet is available in the global scope. And it cannot conflict with the DOM.

[ricmetal]

hi john
thanks again for the info.

i have come up with this:

function checkDivState(id){
	if(checkDivState['div' + id + 'State'] == null || checkDivState['div' + id + 'State'] == undefined){
		checkDivState['div' + id + 'State'] = 1;
		alert('first time called. expand the div and load the ajax content');
	}else{
		alert('second time called. expand the div but do not load the ajax content again.');
	}
}
<a href='#' id='4' onclick='checkDivState(this.id);'>expand div</a>
<div id='4'>content</div>

it seems to work well in FF and IE.
i did not call the function after setting the function's property like in your last example, but instead i set the property while making the function call. is this exactly like the last example?

[jscheuer1]

I wouldn't say exactly. It does use the last example as a guide, so in a sense yes. And it does do the same two important things, namely create a globally available value that isn't likely to conflict with anything and that can be tested for without error even before any value has been assigned to it.

• I would observe about the function in your post that its test is a bit overblown. It could be just:
  
  

  function checkDivState(id){
  	if(!checkDivState['div' + id + 'State']){
  		checkDivState['div' + id + 'State'] = 1;
  		alert('first time called. expand the div and load the ajax content');
  	}else{
  		alert('second time called. expand the div but do not load the ajax content again.');
  	}
  }

  Or, since you know the exact value if it's 'falsey' and you want to hand it to the script processor on a silver platter (which some think is more efficient):
  
  

  if(checkDivState['div' + id + 'State'] === undefined)

  
  
• I would also observe that it makes clever use of the [] bracket notation for properties in order to be able to be applied to any division. That's a good tool to have. It allows your code to be more modular, allows you to do more things with less code.

[ricmetal]

gotta love those brackets
thanks again jonh