LocalStorage Failing

[munsterlander]

Ok, so I have been struggling with this. I thought I had it resolved and have posted some of this code as solutions. It seems to work part of the time then fails the other part and I am not certain why. I figure this has to do with something being overwritten or timeline of when things are being set. A working code pen is posted here: http://codepen.io/anon/pen/KzNMQR

So to test this and cause the issues, click on Page 2, note the console.log output, change the switch, change tabs, then go back to the other tab, note the console.log output. For the first few, it seems you get the correct output, which should be all the same, i.e. true true true or false false false. Then out of nowhere, you start getting true true false or false false true.

Any thoughts? I have moved the switch setting line around without positive results. This has been a bit elusive.

Thanks!

JS code is here:

if (localStorage.getItem("useDetailedStats") === null) {
  localStorage.setItem('useDetailedStats', 'true');
}
var useDetailedStats = localStorage.getItem('useDetailedStats');
document.addEventListener("show", function(event) {
      if (event.target.id == "pgStats") {
        console.log(useDetailedStats + ' ' + localStorage.getItem('useDetailedStats') + ' ' + (useDetailedStats === 'true'));
        document.getElementById('optStats').setChecked((useDetailedStats === 'true'));
        document.getElementById('optStats').addEventListener('change', function(e) {
          localStorage.setItem('useDetailedStats', e.target.checked);
          useDetailedStats = e.target.checked;
        });
      }
    });

I have changed the shortcut if, to read like this as well: (useDetailedStats === true)

This make everything read correctly but it does not change the selected state of the switch. With quotes, it does, so I left it there for the pen.

Also, is there an easier way to do this? Basically, I am using a switch for options within the app and I use those options all over the place.

[Fran Diox]

@munsterlander localStorage only uses strings. Therefore, here:

localStorage.setItem('useDetailedStats', e.target.checked);
useDetailedStats = e.target.checked;

The first line saves a string in localStorage and the second saves a boolean in a variable. Later on you check (useDetailedStats === 'true'), but that variable contains a boolean, so true !== 'true'.

The first time it works because var useDetailedStats = localStorage.getItem('useDetailedStats'); is a string, but as you saw before, useDetailedStats = e.target.checked; will be a boolean.

Edit:

@munsterlander Also I think you can just make your page persistent so you can always access to the switch value. From beta 7 every tab page will be persistent, but before that you need to add persistent attribute.

[munsterlander]

@Fran-Diox Thanks for the insight and confirmation on what I thought to be true. I had assumed that the typeless state of JS would resolve that, but it doesn’t obviously. I use persistent on some of the other tabs and have added it for this as it resolves having to set it onshow. This however, still has not resolved it on load.

To force the hand, I explicitly typed the these lines toString:

localStorage.setItem('useDetailedStats', e.target.checked.toString());
useDetailedStats = e.target.checked.toString();

This then makes this line resolve correctly:

(useDetailedStats === 'true')

As the type and value will be String and True (example data obviously). However, this line is still not changing the state of the switch. It has worked before, so I am confused why it is not working without persistent engaged.

document.getElementById('optStats').setChecked((useDetailedStats === 'true'));

I have updated the pen with the most recent mods.

Edit: Taking what you have said, I was thinking. With persistent, will that attach the switch to the DOM even though the page hasn’t been viewed? If so, then what is the easiest way to set the switch state based on the localStorage? I thought my method was effective, but obviously I am still having issues. Should I use:

document.getElementById('optStats').setChecked(Boolean(useDetailedStats));

Nope, that doesn’t work which is odd to me. Is setChecked expecting a boolean or a string representing the boolean value?

Thanks!

[Fran Diox]

@munsterlander Oh! You are using beta.6 and there was a bug prior to beta.7 in Codepen (they include the libraries at the end of the body tag instead of the head), so your ons-switch is being compiled inside the ons-template and then compiled again when pushed to the tabbar. As I said that was fixed in beta.7.
I just realized that Codepen also complains if you use beta.7, I’ll check why. Meanwhile you can just add it manually with <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.7/js/onsenui.js"></script> instead of using the library tool they provide.

[munsterlander]

@Fran-Diox Ah Ha! That would do it. I was just at a loss as to why that code wasn’t working. I have rewritten that section so many times and it was so inconsistent and now that make perfect sense. Awesome! I have updated everything to 7.0 and will test in the morning! Thanks again!

Edit: Tested this morning and that solves that! Updating to Beta 7 resolved that lingering issue. Also, YAY! Super cool features in Beta 7 that I hadn’t planned on using for this app, I now get to use!