Even though localStorage has been around for several years, there are still inconsistencies across browsers when it comes to both removing items and reporting which items exist as members. IE8, Firefox Desktop <= v13, Firefox Mobile, Opera and Opera Mobile all suffer from problems.
Non-Existent Item ValuesIn all tested browsers that support localStorage, a call to localStorage.getItem for an item that does not exist returns null. In Firefox (versions <= 13), a call to localStorage.<non_existent_item_name> will return null as well.
// val === null in all tested browsers var val = localStorage.getItem("non_existent"); // val === undefined in most browsers, in Firefox <= v13, val === null var val = localStorage.non_existent;
Firefox's discrepency has been fixed in Firefox 14, which is in the Aurora Channel at the time of writing this article.
Using the `in` Operator on Non-Existent ItemsBoth Firefox (versions <= 13) and Opera fail using the `in` operator. Opera appears to always misreport an item as being `in` localStorage. Firefox will report an item as being `in` localStorage after the item is removed using removeItem. Firefox will correctly update its state when the page is reloaded.
// Opera always returns true. All other browsers return false. var hasItem = "non_existent" in localStorage; localStorage.firstItem = "someValue"; // hasItem will be false in Firefox <= v13 after delete delete localStorage.firstItem; var hasItem = "firstItem" in localStorage; localStorage.secondItem = "newValue"; // hasItem will be true in Firefox <= v13 after removeItem localStorage.removeItem("secondItem"); var hasItem = "secondItem" in localStorage;
localStorage.hasOwnPropertySince `in` appears to be a no-go for a subset of browsers, perhaps localStorage.hasOwnProperty could help out. It turns out that IE8 does not support hasOwnProperty on localStorage. Opera returns true for every property that is queried.
// IE8 excepts with `TypeError: Object doesn't support this property or method` // Opera returns true var hasItem = localStorage.hasOwnProperty("undefined_item")
Removing Items - delete vs localStorage.removeItemThe entire impetus for this post started in a code review where I saw an author do a mistake that I have been bitten by in the past - removing items from localStorage using the `delete` operator. Unfortunately, IE8 will throw an exception if the item being deleted is not already in localStorage.
localStorage.item = "value"; // The first delete will work everywhere delete localStorage.item; // IE8 will throw `TypeError: Object doesn't support this property or method` delete localStorage.item;
This is a problem, because it is not possible to reliably query whether an item is in localStorage in all browsers. As noted above, both Firefox and Opera can return true using the
in operator and IE8 and Opera both fail using localStorage.hasOwnProperty.