javascript - Firefox 中的 localStorage 不可靠

Question

我正在研究 deck building application对于我玩的纸牌游戏。我正在使用 localStorage 来保存和检索牌组。它似乎在 Chrome 中运行完美，但在 Firefox 中运行不可靠。

在 FF 中，一开始似乎一切正常，甲板甚至通过重新加载仍然存在。但是，如果我添加第二副牌并重新加载，它只会找到第一副牌。如果我删除第一副牌，它就再也找不到任何东西了。

所有本地存储交互都在 scripts/vault.js 中，我将在下面重现。我做错了什么吗？

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);
};

基本上，由于找不到更好的术语，localStorage 中的键似乎在某些时候被“卡住”了；当我操作 localStorage 时，它​​会正常运行，但只要我刷新页面，它似乎就会恢复到它卡住的状态。

Answer 1

我遇到过几次同样的问题，起初我没有注意到它无法读取 localStorage 的原因，但我想我找到了解决方案。

localStorage 操作都是同步的，不同的浏览器对它们的处理方式有一定的怪癖。

在您的情况下，问题似乎是您试图在 DOM 准备好之前读取 localStorage。我用 Firebug 试了一下，我在 vault.js 文件的开头添加了一个断点并重新加载页面，当代码中断时，我检查 dom-tab 并找到 localStorage 属性，它是 - 存储的完整列表值。当我删除断点并重新加载页面时，页面加载后它们都消失了。

这可能是 Firefox 或其他浏览器中的错误，只是更快地初始化 localStorage。

因此，作为您问题的解决方案:在 DOM 准备就绪后尝试从 localStorage 获取 key 。