How To Cleanly Use JS Variables In An Onclick Function That Are Set In The Page Load Function

I have a functionality that I had running in the window.addEventListener('load', function() { var variable_name_1 = localStorage.getItem('var_1'); ... } and I would like

Solution 1:

To not pollute the global scope with a lot of variables (which can be overridden by other apps), I recommend you create an object with an app specific name, maybe something like this

var myAppVar = {};
window.addEventListener('load', function() {
  myAppVar.var_1 = localStorage.getItem('var_1');
  ...
}

Solution 2:

Just define them in global scope:

var variable_name_1;
window.addEventListener('load', function() {
  variable_name_1 = localStorage.getItem('var_1');
  ...
}

This, however, is not a particularly healthy technique, since it's prone to name collisions. Best thing to do is have a custom object (cO, or with your initials, something unlikely to be used by anything else) and use it as a placeholder for all your custom vars:

var cS = {
  var_1:null // or some default value...
};

window.addEventListener('load', function() {
  cS.var_1 = localStorage.getItem('var_1');
  ...
}

Solution 3:

Since localStorage is already global just retrieve the values you need in your handler from there.

function maketempuser() {
    var variable_name_1 = localStorage.getItem('var_1');
}

No need to add anything extra to the global scope at all.