2

I am having trouble understanding some weird behavior in my code and I am wondering if anyone can tell me what I am doing wrong?

I have a Boolean variable isWaiting and it is saved as false in localStorage and when it is retrieved, it is shown as false but when you do validation, it doesn't see it that way. Here is a small code to replicate my issue:

(function(){
    localStorage.setItem("isWaiting", false);
    var isWaiting = localStorage.getItem("isWaiting");
    console.log("isWaiting = " + isWaiting)
    console.log("Is isWaiting False? " + Boolean(isWaiting === false));
    // I have tried it as this as well
    console.log("Is isWaiting False? " + (isWaiting === false));
})()

Should get:

isWaiting = false

Is isWaiting False? true

Produces:

isWaiting = false

Is isWaiting False? false ⬅ This is clearly wrong, so why is this happening?

What am I doing wrong? Is the boolean value of false somehow getting mangled in the localStorage process and if so, how would I account for it, if not, then what is wrong?


Solution Update:10/09/18

Based on the kind replies helping me confirm that indeed my suspicion that the LS process is butchering the value type was correct and more specifically the solution provided by @bhojendra-rauniyar, I have changed the code to correct the type right at the moment of retrieval and then handling it as normal throughout the code avoiding having a ton of added code and it seems to have done the trick, thank you to all for your help.

...
    var isWaiting = Boolean(JSON.parse(localStorage.getItem("isWaiting")));
...
GµårÐïåñ
  • 2,846
  • 5
  • 31
  • 35
  • another useful thread https://stackoverflow.com/questions/7061702/store-booleans-in-javascripts-localstorage – Narendra Oct 09 '18 at 03:48
  • @Narendra thank you for linking that, which was a duplicate, but following down the rabbit hole, I found (https://stackoverflow.com/questions/3263161/cannot-set-boolean-values-in-localstorage) which suggests a reason but it was posted back in 2010, does it still hold true I wonder? – GµårÐïåñ Oct 09 '18 at 15:48

3 Answers3

5

Local storage stores the value in string. So, even if you use Boolean('false') will return true. Because it's not empty string. Anything that has value in string is to be true. To get around this, you may use:

Boolean(JSON.parse('false')) // false
Boolean(JSON.parse('true')) // true

So, you can do:

Boolean(JSON.parse(isWaiting))

Alternatively, you may also compare with string:

String(false) === 'false' // true

So, using:

console.log(String(isWaiting)) // will return false
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • Thank you, while the solution presented by others below would be less code, I think I like the stability and assurance of your method. I am going to try and test the code fix and if that resolves it then I will be back quick to mark it. – GµårÐïåñ Oct 09 '18 at 15:52
1

localstorage sets values as string. In your example Boolean(isWaiting === false) -> false but if you check Boolean(isWaiting === 'false') -> this will give you true

Narendra
  • 4,514
  • 2
  • 21
  • 38
  • 1
    Ok, so you are suggesting just validate the string itself, thank you I didn't expect that LS would turn everything string only, live and learn. – GµårÐïåñ Oct 09 '18 at 15:50
0

LocalStorage will save values in the string and you cannot compare a string to boolean. So you need to compare it like this:

(function(){
    localStorage.setItem("isWaiting", false);
    var isWaiting = localStorage.getItem("isWaiting");
    console.log("isWaiting = " + isWaiting)
    console.log("Is isWaiting False? " + Boolean(isWaiting === 'false'));
    // I have tried it as this as well
    console.log("Is isWaiting False? " + (isWaiting === 'false'));
})()
Keyur Ramoliya
  • 1,900
  • 2
  • 16
  • 17
  • Yes, thank you, Narendra gave the same technique and Bhojendra provided an alternative, so I think I can get make due for now. – GµårÐïåñ Oct 09 '18 at 15:51