Why is null stored as a string in localStorage?

Question

In the Chrome console I set foo to null:

localStorage.setItem("foo",null)

Then I test, whether it is null:

console.log(localStorage.getItem("foo")==null)

prints false.

Then I test, whether it is the string "null":

console.log(localStorage.getItem("foo")=="null")

prints true.

I thought that null was a legitimate Javascript value. Storing it as the string "null" is very counter intuitive and caused a strange bug in an otherwise working program, when I cleared the localStorage in the browser manually.

Answer 1

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

All values are stored as strings in local storage. You should stringify data before storing it and parse data after retrieving it:

localStorage.setItem("foo", JSON.stringify(null));
var value = JSON.parse(localStorage.getItem("foo"));
console.log(value === null);

Answer 2

As per spec, localstorage uses Storage object interface

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString? getItem(DOMString key);
  setter void setItem(DOMString key, DOMString value); //notice this line
  deleter void removeItem(DOMString key);
  void clear();
};

setter method translates to setItem, accepts only DOMString

As per documentation

DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.

Passing null to a method or parameter accepting a DOMString typically stringifies to "null".