Firefox中的localStorage不可靠 [英] localStorage unreliable in Firefox

问题描述

我正在为我玩的纸牌游戏制作一个甲板建筑应用程序。我正在使用localStorage来保存和检索套牌。在Chrome中，这似乎是完美的工作，但在Firefox中，它工作不可靠。

在FF中，一切似乎一开始工作，甲板甚至坚持通过重新加载。但是，如果我添加第二套牌并重新加载，它只会找到第一套牌。如果我删除第一个套牌，它不会再找到任何东西。

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

  vault = {}; 
 vault.makeKey = function（s）{
 returndeck：+ 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（这个浏览器不支持本地存储，你将无法保存卡片。）; 
 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  k = keys [i]; 
 name = vault.friendlyName（k）; 
 if（name！== k&& localStorage [k]）{
 out.push（{name：name，key：k}）; 
 
 $ b $ out.sort（function（a，b）{
 return a.name> b.name？1：-1; 
}） ; 
退出; 
}; 
 vault.deleteDeck = function（key）{
 localStorage.removeItem（key）; 
}; 
  

基本上，在某些时候localStorage中的密钥似乎被冻结术语; localStorage在我操作的时候会正常运行，但是当我刷新页面的时候，它似乎会恢复到它被冻结的状态。

解决方案

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

localStorage操作都是同步的，不同的浏览器对于如何处理这些操作都有一定的诡异。

在你的情况中，是因为你正在尝试在DOM准备好之前阅读localStorage。我用Firebug试了一下，我在vault.js文件的开始处添加了一个断点，然后重新加载页面，当代码中断时，我检查dom选项卡并找到localStorage属性，在那里它是 - 完整的存储列表值。当我删除断点并重新加载页面时，页面加载完毕后它们全部消失。

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

所以，作为你的问题的解决方案：尝试从localStorage中获取键后DOM准备好。

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.

解决方案

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.

这篇关于Firefox中的localStorage不可靠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！