Saving temporary form information in global Javascript variables

Question

Is there any reason why I shouldn't do something like the following (to avoid using a hidden field to store the temporary information)? I'm using jQuery syntax for brevity but it's a general JavaScript question.

function editComments() {
    window.currentComments = $('#commentsTextBox').val();
    $('#commentsTextBox').removeAttr("readonly");
}

function cancelEditComments() {
    $('#commentsTextBox').val(window.currentComments);
    $('#commentsTextBox').attr("readonly", "readonly");
}

I know that globals are generally considered bad practice, but is there really any problem with doing the above?

Please don't answer/comment with "globals variables are evil" unless you can give a reason/explanation. Thanks.

Answer 1

There's no real problem with this except that global variables are evil. ;)

However, if you are using jQuery anyway, in my opinion, a much nicer way is to store it in the element using data():

function editComments() {
    $('#commentsTextBox').data("oldValue", $('#commentsTextBox').val());
    $('#commentsTextBox').removeAttr("readonly", "readonly");
}

function cancelEditComments() {
var oldValue = $('#commentsTextBox').data("oldValue");
$('#commentsTextBox').val(oldValue );
$('#commentsTextBox').attr("readonly", "readonly");
}

As long as you keep it inside the script, and nothing else gets done with the element, that should work fine.

Answer 2

There's no real reason not to do it, if you ignore the "global variables are bad" argument.

One thing you need to be aware of is you can't .delete properties from the window object in IE, it causes an exception to be thrown. In your case, since it's just a string, it probably doesn't matter.

This fails on IE:

window.foo = 'bar';
delete window.foo;

Answer 3

The problem with globals in javascript (on top of that of any other languages). Is that there is no mechanism to resolve name clashes (or rather, the mechanism is to just assume that it's the same variable). If you use a global variable called currentComments and also include some other module with a currentComments global variable then one of them is going to lose, and you may get unpredictable results.

It would be better to use one that is scoped to your module, thus:

(function(){
    var currentComments;

    function editComments() {
        currentComments = $('#commentsTextBox').val();
        $('#commentsTextBox').removeAttr("readonly", "readonly");
    }

    function cancelEditComments() {
        $('#commentsTextBox').val(currentComments);
        $('#commentsTextBox').attr("readonly", "readonly");
    }
}());