What is the default value for the HTML5 Local Storage item?

Question

In case you are trying to get a local storage item that does not exist, is it possible to set a default value for this item?

For example, let's say that in your web application, various user interface settings are stored in local storage. When a user leaves your site and then returns, the user interface is configured according to the values ​​derived from their local storage. This works great.

However, when a user first visits your web application, these local storage values ​​do not yet exist. Therefore, when your JavaScript tries to get these local storage items, all of them will be undefined. Is there no way to specify default values ​​for each local storage item in case it does not exist?

Most programming languages ​​that deal with storing a key / value pair offer some way to specify default values ​​(think. Interfaces to .ini configuration files). I was expecting something like this:

var preference = localStorage.getItem('some-key', 'Default Value'); 

Also, I know that I can easily set default values ​​programmatically by checking if they are null / undefined or not, and setting the value accordingly, but I would like to see if this was built into a pair of local storage / value keys and maybe I just didn’t see it. If this function does not exist, I will eventually just write some basic storage shell functions that will add this function.

Answer 1

No, there are no such built-in functions. See Specification for Storage interface :

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

And the following line to confirm this further:

The getItem(key) method should return the current value associated with this key. If the given key does not exist in the list associated with the object, then this method should return null .

You can just use the usual methods. Something like this should be fine:

 var preference = localStorage.getItem('some-key') || 'Default Value'; 

Answer 2

Solution from James:

 var preference = localStorage.getItem('some-key') || 'Default Value'; 

Only works if you never save empty OR booleans OR lines if your variable can be 0.

A solution that is longer but always works:

 var preference = localStorage.getItem('some-key'); if(null === preference) { preference = 'Default Value'; } 

Answer 3

You can use this method for objects.

 /* Helper function that return an object from local storage or a default value */ function getObjectFromLocalstorage(key, default_value){ var value = localStorage.getItem(key); if (value === null){ return default_value; } return JSON.parse(value); } 

And here are some sample output:

 console.log(getObjectFromLocalstorage("some_undefined_key", {})); >>> {} console.log(getObjectFromLocalstorage("some_undefined_key", [])); >>> [] var value = {a: 1}; localStorage.setItem("defined_key", JSON.stringify(value)); getObjectFromLocalstorage("defined_key", {}); >>> {a: 1}