Convert local storage string to bool

Question

I'm using Local Storage in the browser to set a boolean property.

As Local Storage uses strings I'm having to convert to bool as a library function requires a true/false bool rather than string.

Best I've been able to do is the below. It works but seems very clunky.

var t = localStorage.getItem("showTitle")
if (t=="false") { _showTitle = false}
if (t=="true") { _showTitle = true }

I also need to toggle this property based on a button being selected, hence, could do with a cleaner way of handling this if possible.

https://stackoverflow.com/questions/263965/how-can-i-convert-a-string-to-boolean-in-javascript — Horse Badorties, Apr 18 '20 at 19:00

Ayush Gupta · Answer 1 · 2020-04-18T19:04:36.617

1

Well, the cleanest way IMO will be a function.

function getBooleanFromLocalStorage(key) {
  return localStorage.getItem("showTitle") === "true"
}

You can put whatever logic you want here, for defaults value etc, and even your original logic just in case you require it, because even if it seems clunky, it work affect readibility across your application

edited Apr 18 '20 at 19:04

answered Apr 18 '20 at 19:02

Ayush Gupta

8,716
8
59
92

won't this always be false since the string returned will never exactly equal `true`? – Always Learning Apr 18 '20 at 19:04

Cully · Answer 2 · 2020-04-18T19:18:25.147

1

You would use JSON.stringify when setting the value and JSON.parse when retrieving:

localStorage.setItem('showTitle', JSON.stringify(_showTitle))
_showTitle = JSON.parse(localStorage.getItem('showTitle'))

This is generally the chosen method for storing non-string values in a Storage object.

If you're going to be storing lots of non-string values, you can generalize it:

const setStorageItem = (key, value) => {
  localStorage.setItem(key, JSON.stringify(value))
}

const getStorageItem = (key) => {
  return JSON.parse(localStorage.getItem(key))
}

You'd then use it like this, for your example:

setStorageItem('showTitle', _showTitle)
_showTitle = getStorageItem('showTitle')

This method would work with objects, numbers, booleans, null, etc.

edited Apr 18 '20 at 19:18

answered Apr 18 '20 at 19:03

Cully

6,427
4
36
58

That causes so much unnecessary overhead – Ayush Gupta Apr 18 '20 at 19:03
1

@AyushGupta You object to this because of performance? If you wanted to optimize your app because of poor performance, this would be pretty far down the list. Plus, this is the idiomatic, established method for storing non-strings in a Storage object. – Cully Apr 18 '20 at 19:06
@AyushGupta I just timed the operation. It took `0.00006` seconds to set and get the value using JSON functions, and `0.000055` seconds using the method you posted. I don't think a difference of `0.000005` seconds is going to make any difference, even at scale. – Cully Apr 18 '20 at 19:14
sure, but `JSON.parse(localStorage.getItem('showTitle'))` can going to be called from a seperate place than `localStorage.setItem('showTitle', JSON.stringify(_showTitle))`. In this case, as someone reading the code, I can't be sure what the type of the value returned by `getItem` is, without looking at how its being used – Ayush Gupta Apr 18 '20 at 20:28
@AyushGupta You could make the same criticism against any of the solutions posted. You'd have to know that the value could be the string "true" or "false", or that you need to parseInt the value and see if it's a 1 or a 0. If you're going to use a value from localStorage, you're going to need to have an idea of what form the value could take. If you're really concerned about it, just put storage and retrieval behind an interface, like in my example. – Cully Apr 19 '20 at 04:20

score 1 · Answer 3 · answered Apr 18 '20 at 19:03

1

In Javascript, true and false are often represented as 1 and 0 so you could store "1" for true, and "0" for false, then do this:

var t = localStorage.getItem("showTitle")
_showTitle = !!parseInt(t)

answered Apr 18 '20 at 19:03

Always Learning

5,510
2
17
34

score 0 · Answer 4 · answered Apr 18 '20 at 19:10

You can use an empty string for for false and a non-empty string for true:

var t = ""
var _showTitle;

if (t) {
  _showTitle = false;
} else {
  _showTitle = true;
}

console.log(_showTitle);

Or you could also use "0" and "1" and then parseInt() to convert to integers since 0 is falsey and 1 is truthy:

var t = "0"
var _showTitle;

if (parseInt(t)) {    // if it's a number and evaluates to anything but 0
  _showTitle = false;
} else {
  _showTitle = true;
}

console.log(_showTitle);

Or you could also use boolean strings like this:

var t = "false"
var _showTitle;

if (t === "true") {
  _showTitle = false;
} else {
  _showTitle = true;
}

console.log(_showTitle);

Convert local storage string to bool

4 Answers4