Setting Localstorage Variable Name to a Variable's value

Question

I am using a javascript loop to create localstorage variables. For some reason, all the localstorage values are null except for the last one. Does anyone know why?

Here is my code:

function setValues() {
    var json = jQuery.parseJSON(data);
    for (var i=0; i<json.length; i++)
    {
        var id = json[i].id;
        $.ajax({
            url: url,
            crossDomain: true,
            type: 'post',
            data: {
                'theid': id
            },
            success: function (data2) {
                window.localStorage['club'+id] = data2;
            },
       });
    }
}

function getValue(id) {
   console.log(window.localStorage.getItem('club'+id));
}

I call getValue() else where in the code, it is irrelevant to the issue. If the 'id' is the last id that was used for adding to the localstorage, it isn't null. However, it seems as if all the previous values are overwritten.

How can I fix this issue? Any help would be appreciated. Thanks!

score 3 · Accepted Answer · edited May 23 '17 at 12:14

ANSWER REWRITE BASED UPON THE OP's QUESTION CHANGE

This is actually a very common JavaScript issue and almost impossible to search for unless you already know the answer the magic words involved.

Because your wording is slightly different than the usual issue, I'm not going to vote to close this question but rather, explain what is going on.

There is only one copy of the variable i and that variable is changed as the loop runs. By the time the callbacks return, that loop is long over and i has reached its final value.

What you need to do is capture a local copy of that value. There are two ways to do it -- I'll show the easiest one to read:

function doAjax(i) {
  // this 'i' is private.
  var id = json[i].id;
  $.ajax({
    url: url,
    crossDomain: true,
    type: 'post',
    data: {
      'theid': id
    },
    success: function (data2) {
      window.localStorage['club' + id] = data2;
    }
  });
}

function setValues() {
  var json = jQuery.parseJSON(data);
  for (var i = 0; i < json.length; i++) {
    doAjax(i);
  }
}

The other way to do this is to use a closure and an anonymous function:

function setValues() {
  var json = jQuery.parseJSON(data);
  for (var i = 0; i < json.length; i++) {
    (function (i2) {
      // this 'i' is private.
      // Givign it the name of 'i2' just to be clear
      var id = json[i2].id;
      $.ajax({
        url: url,
        crossDomain: true,
        type: 'post',
        data: {
          'theid': id
        },
        success: function (data2) {
          window.localStorage['club' + id] = data2;
        },
      });
      // this is the 'i' from the main loop
    }(i));

  }
}

For more info see

How do JavaScript closures work?

You, sir, are a god. Thank you so much for the genius explanation! — user3630775, Jun 08 '14 at 02:02

Setting Localstorage Variable Name to a Variable's value

1 Answers1