Trying to set dynamic JS variables in a function globally

Question

I'm trying to set local storage values using dynamic variables from within a function what will be looped through. Basically i'm just trying to do this (which works but isn't dynamic):

 localStorage.lvlZeroValue = localStorage.lvlZeroMaxValue;

using this:

counterMarkers[numberID] = maxMarkers[numberID];

but it's not affecting 'localStorage.lvlZeroValue' at a global level

$('#spellCountTackMax').click(function() {

    var counterMarkers = [
        localStorage.lvlZeroValue,
        localStorage.lvlOneValue,
        localStorage.lvlTwoValue,
        localStorage.lvlThreeValue,
        localStorage.lvlFourValue,
        localStorage.lvlFiveValue,
        localStorage.lvlSixValue,
        localStorage.lvlSevenValue,
        localStorage.lvlEightValue,
        localStorage.lvlNineValue
    ];

    var maxMarkers = [
        localStorage.lvlZeroMaxValue,
        localStorage.lvlOneMaxValue,
        localStorage.lvlTwoMaxValue,
        localStorage.lvlThreeMaxValue,
        localStorage.lvlFourMaxValue,
        localStorage.lvlFiveMaxValue,
        localStorage.lvlSixMaxValue,
        localStorage.lvlSevenMaxValue,
        localStorage.lvlEightMaxValue,
        localStorage.lvlNineMaxValue
    ];

        jQuery.fn.onTackSet = function(numberID){

            return this.each(function(){

                if(maxMarkers[numberID] == "" || maxMarkers[numberID] == null || maxMarkers[numberID] == 0 ) {

                    alert("not else ran");
                    $(this).attr('value', "0");
                    $('#spin' + numberID).attr('value', "0");
                    counterMarkers[numberID] = "0";
                    maxMarkers[numberID] = "0";



                } else {
                    alert("else ran");
                    $(this).attr('value', maxMarkers[numberID]);
                    $(this).attr('max', maxMarkers[numberID]);
                    // localStorage.lvlZeroValue = localStorage.lvlZeroMaxValue;
                    alert(counterMarkers[numberID]);
                    alert(maxMarkers[numberID]);

                    // this works but isn't dynamic
                    localStorage.lvlZeroValue = localStorage.lvlZeroMaxValue;

                    // my attempt at making it dynamic doesn't seem to work globally
                    counterMarkers[numberID] = maxMarkers[numberID];

                }
            });
        };

        $("#spin0").onTackSet(0);

So i'm pretty sure my issue is scope, yet i can't seem to get it right. Please, help. Thanks!

This might help: http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — Rajesh, Nov 10 '16 at 11:34
What you have works, but remember you're only changing the values of the arrays - you're not affecting `localStorage` at all. You would need to serialise the values of the arrays back to your `localStorage`. Better yet - store two values in your LS, each an object with the keys you have right now. — Rory McCrossan, Nov 10 '16 at 11:35
Thank you for your reply. It is much appreciated. What do you mean by ' store two values in your LS, each an object with the keys you have right now'. I'm not exactly sure how I can make that LS value update from within this function using dynamic variable names. By serialize do you mean use .serializeArray()? — D. Wall, Nov 10 '16 at 11:44
Think i've got it. Something like localStorage.setItem(countLocation, maxMarkers[numberID]); so that the local storage is set when the function is run. Seems to be working — D. Wall, Nov 10 '16 at 12:24

moni_dragu · Accepted Answer · 2016-11-10T12:18:24.350

Do you need to keep the keys for your storage values the way you have them? If you could change them from lvlZeroValue to lvl0Value you could use the approach below:

    jQuery.fn.onTackSet = function(numberID){

            return this.each(function(){

                if(localStorage['lvl'+numberID+'MaxValue'] == "" || localStorage['lvl'+numberID+'MaxValue'] == null || localStorage['lvl'+numberID+'MaxValue'] == 0 ) {

                    alert("not else ran");
                    $(this).attr('value', "0");
                    $('#spin' + numberID).attr('value', "0");
                    localStorage['lvl'+numberID+'Value'] = "0";
                    localStorage['lvl'+numberID+'MaxValue'] = "0";



                } else {
                    alert("else ran");
                    $(this).attr('value', localStorage['lvl'+numberID+'MaxValue']);
                    $(this).attr('max', localStorage['lvl'+numberID+'MaxValue']);

                    localStorage['lvl'+numberID+'Value'] = localStorage['lvl'+numberID+'MaxValue'];

                }
            });
        };

If you need to keep the keys you have now you still could adapt the above approach to your needs by building your arrays different:

var markers = [
        'lvlZeroValue',
        'lvlOneValue',
        'lvlTwoValue',
        'lvlThreeValue',
        'lvlFourValue',
        'lvlFiveValue',
        'lvlSixValue',
        'lvlSevenValue',
        'lvlEightValue',
        'lvlNineValue'
    ];
var maxMarkers = [
        'lvlZeroMaxValue',
        'lvlOneMaxValue',
        'lvlTwoMaxValue',
        'lvlThreeMaxValue',
        'lvlFourMaxValue',
        'lvlFiveMaxValue',
        'lvlSixMaxValue',
        'lvlSevenMaxValue',
        'lvlEightMaxValue',
        'lvlNineMaxValue'
    ];

and use them like this:

localStorage[markers[numberID]] = localStorage[maxMarkers[numberID]];

Here is a fiddle to see how it works.

it's fine if i change the keys. I haven't got your method to work in my code yet...but it's late and i'm probably making careless mistakes. Going to give it another shot in the morning. Thanks so much for your help. — D. Wall, Nov 10 '16 at 12:53
Yes! All is working now :) I didn't know you could use square brackets like this with vars. I voted up your solution but it said i wouldn't count because i'm too new to the site :/ — D. Wall, Nov 11 '16 at 03:12

score 0 · Answer 2 · answered Nov 10 '16 at 12:30

i think i fixed it doing this:

jQuery.fn.onTackSet = function(countLocation, numberID){

            return this.each(function(){

                if(maxMarkers[numberID] == "" || maxMarkers[numberID] == null || maxMarkers[numberID] == 0 ) {

                    // alert("not else ran");
                    $(this).attr('value', "0");

                    $('#spin' + numberID).attr('value', "0");
                    counterMarkers[numberID] = "0";
                    maxMarkers[numberID] = "0";



                } else {
                    // alert("else ran");
                    $(this).attr('value', maxMarkers[numberID]);
                    $(this).attr('max', maxMarkers[numberID]);
                    // localStorage.lvlZeroValue = localStorage.lvlZeroMaxValue;
                    alert(countLocation);
                    alert(maxMarkers[numberID]);

                    // this works but isn't dynamic
                    // localStorage.lvlZeroValue = localStorage.lvlZeroMaxValue;
                    localStorage.setItem(countLocation, maxMarkers[numberID]);
                    // my attempt at making it dynamic doesn't seem to work globally
                    // counterMarkers[numberID] = maxMarkers[numberID];

                }
            });
        };

        $("#spin0").onTackSet("lvlZeroValue", 0);

...but your answer is cleaner. Thanks a lot for your input. I will try it your way. Actually i still need to update the if null, if "" section of this...

Trying to set dynamic JS variables in a function globally

2 Answers2