繁体   English   中英

为什么在不同的浏览器实例之间使用会话存储?

[英]Why is session storage being drawn upon between different browser instances?

背景
在正在处理的应用程序中,我发现可以在Windows 10上的Chrome 62中的sessionStorage中定义值,并且显然在一个选项卡中更改该值会影响指向同一键的其他选项卡。

我在假设localStorage应该在所有浏览器窗口中保留信息的前提下进行操作,而sessionStorage仅应该在特定窗口或选项卡中保留信息。

更具体地说,我有一个AngularJS服务,用作sessionStorage交互的层:

export class PersistenceSvc {
    public static $inject: string[] = ['$window'];
    public constructor(public $window: ng.IWindowService) {}

    public save<T>(name: string, data: T): void {
        const saveData: string = JSON.stringify(data);
        this.$window.sessionStorage.setItem(name, saveData);
    }

    public load<T>(name: string): T {
        const loadData: string = this.$window.sessionStorage.getItem(name);
        const result: T = JSON.parse(loadData) as T;
        return result;
    }
}

...我在run块中使用以便在应用程序中实现一些数据持久性。

export function persistSomeData(
    someSvc: Services.SomeService, 
    userAgentSvc: Services.UserAgentSvc,
    persistenceSvc: Services.PersistenceSvc,
    $window: ng.IWindowService) {
    if(userAgentSvc.isMobileSafari()) {
        // Special instructions for iOS devices.
        return;
    }

    const dataToPersist: Models.DataModel = persistenceSvc.load<Models.DataModel>('SomeData');
    if(dataToPersist) {
        // Set up the state of someSvc with the data loaded.
    } else {
        // Phone home to the server to get the data needed.
    }

    $window.onbeforeunload = () => {
        persistenceSvc.save<Models.DataModel>('SomeData', someSvc.dataState);
    };
}

persistSomeData.$inject = [
    // All requisite module names, omitted from example because lazy.
];
angular
    .module('app')
    .run(persistSomeData);

当仅使用单个选项卡进行操作时,这可以正常工作(除非从iOS设备运行,但这与我所遇到的事情是相切的。)但是,当您执行以下操作时,您会开始看到一些更有趣的行为...

脚步:
1.打开一个Chrome实例。 创建一个新选项卡,并将其拖出,使其成为自己的窗口。
2.使用上面的代码导航到您的站点。
3.在您的站点上执行使someSvc的数据状态在第一个浏览器中具有不同数据的操作。
4.在您的站点上执行使someSvc的数据状态在第二个浏览器中具有不同数据的操作。
5.在您的站点上执行一些操作,该操作利用第一个浏览器中的someSvc的数据状态。
6.观察到在第一个浏览器实例上使用的数据是由第二个浏览器实例提供的。 (这就是问题,就在这里。)

题:
过去,我没有做过很多cookie / localStorage / sessionStorage编程,因此很可能我误解了一些东西。 牢记这一点 ,为什么window.sessionStorage的行为方式使MDN文档以及该SO问题的成功答案都表明它不应表现出来?

编辑:事实证明有问题,但不是客户端。 在我假设客户是问题的前提下进行操作时,结束这个问题。

您的代码有问题,因为在浏览器控制台上进行的快速简便测试表明,sessionStorage仅影响打开的浏览器选项卡。 右侧标签中的更改不会反映到左侧标签中:

在此处输入图片说明

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM