Lost data stored in localStorage issue

Question

I have a token stored in localStorage, I have also a method that verifies if the token is correct or not, as you can see in this code:

let token = localStorage.getItem('token');
console.log(token);

if ( !token )
{
    return null;
}

const parts = token.split('.');

if ( parts.length !== 3 )
{
    throw new Error('error');
}
....

if the token is undefined I will return null, else continue the verification.

There are two issues I can't understand:

• Why did I lose the token from the localStorage when I refresh the page
• Why does the if ( !token ) return false when token is undefined, the first console.log return undefined, but my method continues to const parts = token.split('.');.

Answer 1

Local storage work only with strings.

MDN: Window.localStorage

The keys and the values stored with localStorage are always in the UTF-16 DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

So, every value is serialized as a string.

localStorage.setItem('token', undefined);
let token = localStorage.getItem('token');
console.log(token);
console.log(typeof(token));

Prints out in the console:

undefined
string

Conclusions:

1. Don't store null and undefined in Local Storage.
2. When validating the value from Local Storage, always treat it as a string value.

---

Notes:

1. Validation should return false by default. And only in case of success should return true.
2. You shouldn't store any tokens in Local Storage, it's not secure.
3. You shouldn't validate anything on a client as the validation logic can be easily manipulated.