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

时间:2018-02-21 22:09:50

标签: angularjs google-chrome typescript persistence session-cookies

背景
在我正在处理的应用程序中,我发现我可以在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的行为方式the MDN documentation以及the winning answer to this SO question表示它不应该表现为?

编辑:事实证明存在问题,但它并非客户端问题。关闭这个问题,因为我假设客户端是问题而运作。

1 个答案:

答案 0 :(得分:1)

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

enter image description here