How Can I Check If A Localstorage Variable Is Null Or Undefined?

I have this code: var sideBar = localStorage.getItem('Sidebar'); I want to check if sideBar is defined and not null in an if statement. I am a bit confused I know there's a: sideB

Solution 1:

best practice for checking if a variable is defined and not null:

if (typeof sideBar !== 'undefined' && sideBar !== null)

edited realized you're not checking if something is undefined, you're checking that it's defined, so edited again to answer your request more accurately

Solution 2:

As W3 Manual explicitly explained: The getItem(key) method must return the current value associated with the given key. If the given key does not exist in the list associated with the object then this method must return null.

It means, no need to check undefined, If it is undefined then the result of the getItem() method will be null. You need to just check against null.

if (localStorage.getItem("Sidebar") !== null) {
//...
}

Solution 3:

1. localStorage uses Strings to save the data, i.e., you always have to consider JavaScript String logic when reasoning on null vs. undefined, etc.
2. If you set the "sideBar" make sure that you do not use "falsy" values. For Strings thats only the empty String "". If you do something else (e.g., some mathematics) before if-checking the variable, you need to consider additional cases.

Here are some tests that show how JavaScript treats certain values in if statements:

> ("")? true : falsefalse# empty string         -> if fails
> (0)? true : falsefalse# Number 0             -> if fails
> ("0")? true : falsetrue# String "0"           -> if succeeds
> (null)? true : falsefalse# JavaScript null      -> if fails
> ("someText")? true : falsetrue# any other String     -> if succeeds
> (" ")? true : falsetrue# a space character    -> if succeeds

I would not use the awkward double checks for null and undefined. If you directly check the result of localStorage.getItem the result is either null or a String. If you then also consider the empty String "" as "falsy", a simple if statement is fine:

var sideBar = localStorage.getItem('Sidebar');

if(sideBar) {
   // do something with the sideBar
}
else {
   // do something without the sideBar
}

To do a real check for the sideBar never being set in localStorage you need to add a check for the empty String and treat that as "defined":

if(sideBar || sideBar === "") {
    // sideBar defined, maybe even as empty String
}
else {
    // sideBar not set in localStorage
}

Solution 4:

Yes, you bind the two conjunctively (meaning both must be true) with &&

So... if (sideBar === undefined && sideBar !== null) will evaluate to true if and only if each condition evaluates to true.

Solution 5:

This should work, and no there isn't a way outside of an "if", even if it ternary operator,

if( !value ) {
}

This will check if there value is "truethy" and should cover both "null" and "undefined".