Prefer using localStorage.getItem to accessing the property name directly

tldr

Using localStorage.getItem enables you to safely parse a string that may or may not exist.

We can access data from localStorage with getItem or by accessing the property directly. Both return the same data if it exists.

localStorage.getItem('username') // "ekafyi"
 
localStorage.username            // "ekafyi"

If the data does not exist, the former returns null while the latter returns undefined.

localStorage.getItem('sdfdsfsdf') // null
 
localStorage.sdfdsfsdf            // undefined

If we try to parse a stringified object, parsing undefined throws an error whereas parsing null gives you null.

JSON.parse(localStorage.getItem('sdfdsfsdf')) // null
 
JSON.parse(localStorage.sdfdsfsdf)            // Uncaught SyntaxError ...

Alternatively, we can use optional chaining with a fallback value. But I find getItem cleaner and more simple.

JSON.parse(localStorage?.sdfdsfsdf || null)   // null

In: Web browser API MOC

Links to this note

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.