localStorage在Firefox中不可靠

Question

我正在为我玩的纸牌游戏开发甲板建筑应用程序.我正在使用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提取密钥。

Answer 2

虽然这是一篇旧帖子，但我认为我的发现可能会有所帮助。我也遇到了同样的问题，所以我浏览了这篇文章，尝试了这个，这就是我注意到的，在 Firefox 中，如果您尝试在 window.load 之前使用 localstorage 执行任何操作（甚至是 localStorage.getItem），它将删除所有内容它，你将一无所有。所以无论你想做什么设置或获取，在window.load 之后做。

像这样的东西

$( window ).load(function() {
    //do whatever you want to do with localstorage
});

顺便说一句，在此之前，我试图在 document.ready 上使用 localStorage 进行一些操作，但失败了。