localStorage unreliable in Firefox
firefox, javascript, local-storage
Solution
I have run into this same problem a few times and at first I didn't notice the reason why it just couldn't read the localStorage, but I think I found a solution for that.
The localStorage operations are all synchronous and different browsers have certain quirks about how they handle them.
In your case, the problem seems to be that you're trying to read the localStorage before the DOM is ready. I tried it with Firebug and I added a breakpoint to the beginning of the vault.js file and reload the page and when the code breaks, I check the dom-tab and find the localStorage property, and there it is - full list of stored values. When I removed the breakpoint and reloaded the page, they were all gone once the page was loaded.
This might be a bug in Firefox or other browsers just initialize the localStorage faster.
So, as a solution to your problem: try fetching the keys from localStorage AFTER the DOM is ready.
Problem
I'm working on a deck building application for a card game I play. I'm using localStorage to save and retrieve decks. It seems to be working flawlessly in Chrome, but in Firefox it is working unreliably. In FF, everything seems to work fine at first, the deck even persists through a reload. However, if I add a second deck and reload, it only finds the first deck. If I delete the first deck, it no longer finds anything. All the local storage interaction is in scripts/vault.js, which I'll reproduce below. Am I doing something wrong? ``` vault = {}; vault.makeKey = function (s) { return "deck:" + s; }; vault.friendlyName = function(s) { if (s.indexOf("deck:") === 0) { return s.substring(5); } else { return s; } }; vault.store = function (deck, name) { if (!window.localStorage) { alert("This browser doesn't support local storage. You will be unable to save decks."); return; } var key = vault.makeKey(name); localStorage.setItem(key, deck.export()); }; vault.retrieve = function (key) { deck.import(localStorage[key]); }; vault.getDecks = function () { var keys = Object.keys(localStorage), out = [], i, k, name = ""; for (i = 0; i < keys.length; i++) { k = keys[i]; name = vault.friendlyName(k); if (name !== k && localStorage[k]) { out.push({name: name, key: k}); } } out.sort(function (a, b) { return a.name > b.name ? 1 : -1; }); return out; }; vault.deleteDeck = function (key) { localStorage.removeItem(key); }; ``` Basically, it seems like at some point the keys in localStorage get 'frozen' for lack of a better term; localStorage will behave correctly while I manipulate it, but as soon as I refresh the page it seems to revert to whichever state it got frozen in.