localStorage provides the 2nd to last values even after localStorage.clear()

App Building
1

I have an app with a table of to-do tasks. When you click a row the values of the task are populated into a container below which is to be a form to edit the tasks.

Youtube video of problem with naration

The way I have set it up, on row click it runs a javascript control query which runs code like this for all the values....
localStorage.setValue("task_id", table1.selectedRow.data['t.task_id']);
textInput2.setValue(localStorage.values.task_id);
This grabs the values from the table, sends it to localStorage, then pulls it from local storage to populate the test field in the form.

So as I said it's always giving me the 2nd to last thing I clicked even after I run localStorage.clear() and reload the page.
IF I click the same row more than once it trickles down as now the 2nd to last is the same as the last.
I have tried 15 second delays to make sure asynchronous code is not firing off out of the assumed order. It makes now difference.
I have diagnostic fields tween the 2 tables so you can see in the gif that the localStorage is updated seconds before I try to update fields.

Happens in Firefox and Chrome.

Below you can see the function that runs when I click a row.

LMK if I can provide more info. Thanks!

function first() {
  // FROM table TO ls
  localStorage.setValue("task_id", table1.selectedRow.data['t.task_id']);
  localStorage.setValue("saop_id", table1.selectedRow.data['t.sales_opportunity_id']);
  localStorage.setValue("saop_name", table1.selectedRow.data['so_name']);
  localStorage.setValue("cust_name", table1.selectedRow.data['ec.name']);
  localStorage.setValue("cust_id", table1.selectedRow.data['so.customer_id']);
  localStorage.setValue("emp_name", table1.selectedRow.data['ee.name']);
  localStorage.setValue("emp_id", table1.selectedRow.data['so.employee_id']);
  localStorage.setValue("emp_in", table1.selectedRow.data['employee_initials']);
  localStorage.setValue("t_desc", table1.selectedRow.data['t.description']);
  localStorage.setValue("t_completed_at", table1.selectedRow.data['t.completed_at']);
  }
function second() {
  // FROM ls TO view
  textInput2.setValue(localStorage.values.task_id);
  textInput4.setValue(localStorage.values.saop_id);
  textInput5.setValue(localStorage.values.saop_name);
  textInput8.setValue(localStorage.values.cust_name);
  textInput6.setValue(localStorage.values.cust_id);
  textInput9.setValue(localStorage.values.emp_name);
  textInput7.setValue(localStorage.values.emp_id);
  textInput12.setValue(localStorage.values.emp_in);
  textInput3.setValue(localStorage.values.t_desc);
  }
function third() {
  // FROM ls TO view (Set completed)
  lenTest = localStorage.values.t_completed_at += 1;
  if ( lenTest.length > 1)
     {
      checkbox1.setValue(true);
      localStorage.setValue("checkVal", 'Completed '+localStorage.values.t_completed_at);
     }
     else
     {
      checkbox1.setValue(false);
      localStorage.setValue("checkVal", 'Incomplete');
     }

  localStorage.setValue("t_dcpt_id", table1.selectedRow.data['t.daisy_chain_parent_task_id']);
  textInput13.setValue(localStorage.values.t_dcpt_id);
}
function fourth() {
  utils.showNotification({ title: 'table1.selectedRow.data[\'t.task_id\'] '+table1.selectedRow.data['t.task_id'], description:'desc-info', notificationType: 'info'})
  utils.showNotification({ title: 'localStorage.values.task_id '  +localStorage.values.task_id, description:'desc-info', notificationType: 'info'})
  utils.showNotification({ title: 'textInput2.value '      +textInput2.value, description:'desc-info', notificationType: 'info'})  
  }
setTimeout(function () { first(); }, 0);
setTimeout(function () { second(); }, 3000);
setTimeout(function () { third(); }, 3000);
//setTimeout(function () { fourth(); }, 4000);
2

Hi @tomjr! Thanks for reaching out and sharing all of these details.

For Javascript queries, values like localStorage are determined at the time the query is run. When you call function first(), you're able to successfully change the localStorage value, but when you call function second() in the same query, it only has access to the value of localStorage at the time of first running the query (which may be outdated now).

You can go to the Advanced tab of the query to check the following setting so that function second() is able to call the updated value

1242×428 27.2 KB

3

Tess:
I am not involved with Functions. I am simply assigning values to localstorage but when I use the value that I just put in localstorage, I get the previous value.
I have tried to use the Advanced Tab but I can't figure what I should enter in there to deal with this.
Could you advise me on this please.
Mike

4

Hi @mdsmith1

If you have a query that is both assigning values to localStorage and using the updated localStorage value, you'll want to check the box for:

Keep variable references inside the query in sync with your app.

1120×546 25.8 KB

If you don't have this setting checked, when you use the localStorage value it will always be 1 step behind.

If you don't see this setting, you may be on an older version of Retool on-premise. I believe this launched in 2.72.