Reading and writing from localStorage?

Question

I just started to study Phonegap + jQuery Mobile and HTML5,, so don't loose your nerve with my idiocy!

Could somebody tell me why this is not working? When I am using a variable from localStorage, I just get an empty screen when pressing the button, but when using a variable temperature="100", it is working fine. Android 4.1.

<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  window.localStorage.setItem("temperature", "100");
  var temperature = window.localStorage.getItem("temperature");
}
</script>
<div data-role="content">
  <p>Working or not?</p>
  <button onclick="myFunction()">Try it</button>
  <p id="testi"></p>
<script type="text/javascript">
  function myFunction() {
    //var temperature = "100";----> This is working!
    document.getElementById("testi").innerHTML = temperature;
  }
 </script>
</div>

Another question: How to handle variables between pages in Windows Phone? They are not supporting localStorage, so is there another way to handle this if you haven't got db-connection?

Thanks!

Sami

I'm not experienced with phonegag or android, but I'm pretty sure it's a scope/closure problem. You're defining `var temperature` inside the `onDeviceReady` function, it's only defined inside that scope. You can't use it inside of the `myFunction` as that variable has a completely different scope. I'd submit this as an answer, but how come no one answered this in 35 mins? — Fabrício Matté, Jul 15 '12 at 10:12
U can just submit that as an answer! Is there a way to make "global" variables in JavaScript, I think so. I need to figure it out. Thanks a lot! — Sami, Jul 15 '12 at 10:14
Yes, Bryan just made an example. I'll add some to his answer and as I'm little tired to make a "complete" answer. `:)` — Fabrício Matté, Jul 15 '12 at 10:15

score 17 · Accepted Answer · edited May 23 '17 at 11:48

17

temperature is local to the scope of the onDeviceReady function. That is, once the function is over, it's gone.

You have two options:

// Make it global
var temperature;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  window.localStorage.setItem("temperature", "100");
  temperature = window.localStorage.getItem("temperature");
}

or:

// Retrieve it in myFunction
function myFunction() {
  var temperature = localStorage.getItem("temperature");
  document.getElementById("testi").innerHTML = temperature;
}

For a good list of examples of function scope, try this answer.

edited May 23 '17 at 11:48

Community

1
1

answered Jul 15 '12 at 10:13

brymck

7,555
28
31

[How do javascript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) is also a good reference (even though it's a little more in-depth for sub-functions). – Fabrício Matté Jul 15 '12 at 10:16
Thank you both! Basically I have never forced to use JavaScript, but no I have to start, it is everywhere...By the way, my second question, how to handle storing between pages in Windows environment? – Sami Jul 15 '12 at 10:18
A closure could be used to retrieve `temperature` from the localStorage inside the `onDeviceReady` function if you `addEventListener` for the button's `click` event inside the `onDeviceReady` function (instead of writing the `onclick` in the html), but that might be just complicating things. @Sami I don't have experience with Windows Phone so I'll leave it with Bryan. – Fabrício Matté Jul 15 '12 at 10:20
Btw, I couldn't make it. I tried Bryan's second option, but nothing happened, so maybe there is something wrong in usage of localStorage. – Sami Jul 15 '12 at 10:41
deviceready won't fire and it seems to be big problem to everybody. Even if I copied my code straight from Phonegap documentation it is not working. – Sami Jul 15 '12 at 19:56

Reading and writing from localStorage?

1 Answers1

Linked