为什么在不同的浏览器实例之间使用会话存储?
Why is session storage being drawn upon between different browser instances?
背景
在我正在处理的应用程序中,我发现我可以在 sessionStorage
in Chrome 62 on Windows 10 中定义值,并且显然在一个选项卡中更改该值会影响其他选项卡指向同一键的选项卡。
我假设 localStorage
应该在所有浏览器 windows 中保留信息,而 sessionStorage
只应该保留特定 [=65= 的信息] 或制表符。
更具体地说,我有一个 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实例。创建一个新选项卡,然后将其拖出,使其成为自己的 window.
2. 使用上面的代码导航到您的站点。
3. 在您的站点上执行某些操作,导致 someSvc
的数据状态在第一个浏览器中具有不同的数据。
4. 在您的站点上执行某些操作,导致 someSvc
的数据状态在第二个浏览器中具有不同的数据。
5. 在您的网站上做一些事情,利用第一个浏览器中 someSvc
的数据状态。
6. 观察第一个浏览器实例上使用的数据来自第二个浏览器实例。 (这就是问题所在。)
问题:
过去我没有做过很多 cookie/localStorage/sessionStorage 编程,所以我很可能误解了一些东西。 考虑到这一点,为什么 window.sessionStorage
的行为方式与 the MDN documentation as well as the winning answer to this SO question 所说的不应该一样?
编辑:原来是有问题,但不是客户端的问题。关闭这个问题,因为我是在客户端是问题的假设下操作的。
您的代码有问题,因为在浏览器控制台上进行的快速简单测试表明 sessionStorage 仅影响打开的浏览器选项卡。右侧选项卡中的更改未反映到左侧选项卡:
背景
在我正在处理的应用程序中,我发现我可以在 sessionStorage
in Chrome 62 on Windows 10 中定义值,并且显然在一个选项卡中更改该值会影响其他选项卡指向同一键的选项卡。
我假设 localStorage
应该在所有浏览器 windows 中保留信息,而 sessionStorage
只应该保留特定 [=65= 的信息] 或制表符。
更具体地说,我有一个 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实例。创建一个新选项卡,然后将其拖出,使其成为自己的 window.
2. 使用上面的代码导航到您的站点。
3. 在您的站点上执行某些操作,导致 someSvc
的数据状态在第一个浏览器中具有不同的数据。
4. 在您的站点上执行某些操作,导致 someSvc
的数据状态在第二个浏览器中具有不同的数据。
5. 在您的网站上做一些事情,利用第一个浏览器中 someSvc
的数据状态。
6. 观察第一个浏览器实例上使用的数据来自第二个浏览器实例。 (这就是问题所在。)
问题:
过去我没有做过很多 cookie/localStorage/sessionStorage 编程,所以我很可能误解了一些东西。 考虑到这一点,为什么 window.sessionStorage
的行为方式与 the MDN documentation as well as the winning answer to this SO question 所说的不应该一样?
编辑:原来是有问题,但不是客户端的问题。关闭这个问题,因为我是在客户端是问题的假设下操作的。
您的代码有问题,因为在浏览器控制台上进行的快速简单测试表明 sessionStorage 仅影响打开的浏览器选项卡。右侧选项卡中的更改未反映到左侧选项卡: