Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Specify default value for HTML5 Local Storage item?

Tags:

In the case that you are trying to get a local storage item that doesn't exist, is it possible to set a default value for that item?

For example, let's say that in your web app, various UI preferences are saved in local storage. When a user leaves your website and then comes back, the UI is setup according to the values pulled from their local storage. This works great.

However, when a user visits your web app for the first time, those local storage values do not exist yet. So when your JavaScript attempts to get those local storage items, they will all be undefined. Is there not a way to specify default values for each local storage item in the case that it doesn't exist?

Most programming languages that deal with saving key/value pairs offer some sort way to specify default values (think .ini config file interfaces). I was expecting something like this:

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

Also, I know that I can easily programmatically set default values by testing if they are null/undefined or not and set the value accordingly, but I wanted to see if this was built into the local storage key/value pair fetching and that maybe I just wasn't seeing it. If this feature doesn't exist, I will end up just writing some basic local storage wrapper functions that add in this feature.

like image 352
Jake Wilson Avatar asked Dec 09 '12 20:12

Jake Wilson


People also ask

Does HTML5 support local storage?

Because HTML5 local storage is natively integrated into Web browsers, it is available without third-party browser plug-ins. It is described in the HTML5 specifications. Local storage is mainly used to store and retrieve data in HTML pages from the same domain.

What are the localStorage functions in HTML5?

The local storage is a type of HTML5 offline storage that allows user string data to be saved synchronously in their browser. Information is kept in name and value pairs and not available between different browsers on the same device. Local storage can be used as an alternative to cookies.


2 Answers

No, there is no such built-in functionality. See the spec for the 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 just to confirm that further:

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.

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

var preference = localStorage.getItem('some-key') || 'Default Value'; 
like image 198
James Allardice Avatar answered Oct 14 '22 19:10

James Allardice


The solution from James:

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

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

Solution which is longer but always works:

var preference = localStorage.getItem('some-key'); if(null === preference) {     preference = 'Default Value'; } 
like image 41
Mathieu Bulliot Avatar answered Oct 14 '22 19:10

Mathieu Bulliot