Scenario
While working on an application, I discovered an intriguing behavior in Chrome 62 on Windows 10 related to defining values in sessionStorage. Surprisingly, changing a value in one tab affected other tabs that shared the same key.
Initially, I believed that localStorage was intended to persist information across all browser windows, whereas sessionStorage was meant for specific window or tab persistence.
Specifically, I have an AngularJS service dedicated to handling interactions with 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;
}
}
...which is utilized from a run block to facilitate data persistence within the application.
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) {
// Update someSvc state with loaded data.
} else {
// Fetch necessary data from the server.
}
$window.onbeforeunload = () => {
persistenceSvc.save<Models.DataModel>('SomeData', someSvc.dataState);
};
}
persistSomeData.$inject = [
// All necessary module names, not shown in this example.
];
angular
.module('app')
.run(persistSomeData);
When using a single tab, everything functions correctly (excluding iOS device issues). However, when following these steps, unexpected behavior arises...
Steps:
1. Open Chrome and create a new tab which is dragged out into its own window.
2. Visit your site utilizing the code mentioned above.
3. Perform actions causing data state changes in the first browser instance.
4. Do the same in the second browser instance.
5. Interact with the site in a manner that accesses the data state of the first browser.
6. Notice that the data retrieved in the first browser actually came from the second browser instance. (This is the issue at hand.)
Inquiry:
Given my limited experience with cookie/localStorage/sessionStorage coding, it's entirely possible that I've misunderstood something. With that said, why does window.sessionStorage exhibit behavior contrary to what's suggested by both MDN documentation and the top answer on this SO question?
EDIT: There seems to be an issue, but it's unrelated to client-side problems. Closing this inquiry as my assumption about the client being responsible was mistaken.