在隐身模式下打开时无法访问第二个选项卡中的 localStorage [Mozilla Firefox]

IT技术 javascript reactjs local-storage mozilla
2021-05-07 06:20:15

问题:

如何创建一种解决方法来在 Mozilla 上的隐身窗口之间保存状态?


描述:

我有一个依赖于 localStorage 的应用程序。当用户在隐身模式下使用应用程序时,我遇到了一种奇怪的情况。当他在 Mozilla 隐身模式(第二个窗口)下复制窗口时。

localStorage 中的属性丢失。当他再次复制窗口(第三个窗口)时,我们可以访问localStorage属性。

这仅发生在 Firefox 私人窗口中,其他一切在 Chrome 中都运行良好。

我需要一个解决方法而不是使用 cookie。


**测试用例:**

这是如何重现这一点。

在 Mozilla 私人窗口中打开此示例W3 Webstorage Local现在打开控制台并检查localStorage现在复制同一窗口并localStorage在第三个窗口中查找(缺少属性)执行相同操作,您现在可以看到属性。

3个回答

退房PersistJS

PersistJS 是一个 JavaScript 客户端持久化存储库。

您可以做的更合理的事情是使用某种形式的数据库来存储您的数据。

直接从 HTMLUI Fact #3


在“隐身”模式下创建的 LocalStorage 值是隔离的当您以私密/隐身/安全模式(有时更粗略地 - 准确地称为“色情模式”)启动浏览器时,它将创建一个新的临时数据库本地存储值。这意味着当隐私浏览会话关闭时,保存到 LocalStorage 的任何内容都将被销毁,使 LocalStorage 的行为更像 SessionStorage。

此外,由于浏览器的“会话恢复”功能不会重新打开私有模式会话,因此在浏览器窗口关闭后,在 SessionStorage 中创建的任何内容也将丢失。真的,简而言之,一旦浏览器窗口关闭(有意或无意),在隐私浏览会话期间放入 Local 或 SessionStorage 的任何数据都将丢失。

关键语句: any data put in Local or SessionStorage during a private browsing session will be lost as soon as the browser window is closed (intentionally or not).

讽刺的是,it's not a bug, it's a feature

正如 所提到的Hyyan Abo Fakher,您可以在 上找到相同的信息Web Storage API MDN

这确实是Firefox 59 上报告错误。看起来它在某个时候得到了修复,但在构建 71 上再次被报告损坏。截至撰写此答案时,它仍然在 FF 76 上损坏。

如上所述,它没有解决方案,因为它是匿名模式的操作逻辑。但是,解决方法是创建一个单独的会话类,即在启动应用程序时创建一个全局实例,这样客户端就不会依赖于 sessionStorage 或 Internet 连接。这个想法是在用户身份验证时启动会话全局实例,然后通过 getter 和 setter 使用它来处理任何需要的东西。唯一不好的一面是滥用内存,您必须始终清理不使用的内容并尽可能使用最大的优化。我在一些具有良好数据负载的测试应用程序中使用了它(操作了 50,000 条记录)并且我没有性能问题,有时它可以帮助你:)

前任:

// 在typescript中

interface CompanyInterface { 
    name: string,
    enable : boolean
}

interface UserInterface {
    name: string,
    age: number,
    company: CompanyInterface
}

interface SessionDataInterface {
    token: string;
    user: UserInterface;
}

class Session {
    private data: SessionDataInterface; 

    public getData(key: string) {
        return this.data[key];
    }

    public setData(key: string, value: any) {
        return this.data[key] = value;
    }

    constructor(token: string | false = false) { 

        if (!token || token.length <= 10) {
            // You Exception.....
        }               
    }
}

// 在 Java 脚本中

var Session = /** @class */ (function () {
    function Session(token) {
        if (token === void 0) { token = false; }
        if (!token || token.length <= 10) {
            // You Exception.....
        }
    }
    Session.prototype.getData = function (key) {
        return this.data[key];
    };
    Session.prototype.setData = function (key, value) {
        return this.data[key] = value;
    };
    return Session;
}());