CalcumateGEO Session Storage Cleanup in Single Page Applications

Our CalcumateGEO widget uses session storage to persist the selected FACILITY-ID across calculator interactions. While this enhances user experience, it can in very specific situations, cause conflicts when the calculator is used on different pages of the same website, such as when used within Single Page Applications.

Automatic Cleanup

The CalcumateGEO widget automatically attempts to clean up session storage in the following scenarios:

Traditional Multi-Page Websites

• Page unload events: beforeunload and pagehide

• Component unmounting: When React components are properly unmounted

Current Limitations to Automatic Cleanup

In Single Page Applications (SPAs) and other unique scenarios where navigation doesn't trigger full page reloads, the below sequence can occur. When a user:

1. Visits Page A with the calculator and selects a facility

2. Navigates to Page B which also has the calculator

3. The FACILITY-ID from Page A persists and may interfere with Page B's calculator

This is because, in (for example) Single Page Applications (React, Vue, Angular, etc.), our automatic cleanup may not work reliably because:

• No page reloads: Navigation uses client-side routing

• Event timing: Page unload events may not fire during SPA navigation

• Component lifecycle: Our embedded script may not detect when you navigate between routes

Workaround for SPA Applications

If you're using CalcumateGEO in an SPA, we recommend manually clearing the session storage when navigating away from pages that contain the calculator.

React Implementation

import React, { useEffect } from 'react';

const YourPageComponent = () => {
  useEffect(() => {
    return () => {
      try {
        sessionStorage.removeItem('FACILITY-ID');
      } catch (e) {
      }
    };
  }, []);

  return (
    <div>
      {/* Your CalcumateGEO widget here */}
    </div>
  );
};

export default YourPageComponent;

Vue.js Implementation

export default {
  name: 'YourPageComponent',
  beforeUnmount() {
    try {
      sessionStorage.removeItem('FACILITY-ID');
    } catch (e) {
      // Handle cases where sessionStorage might not be available
    }
  }
}

Angular Implementation

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.component.html'
})
export class YourPageComponent implements OnDestroy {
  
  ngOnDestroy(): void {
    try {
      sessionStorage.removeItem('FACILITY-ID');
    } catch (e) {
      // Handle cases where sessionStorage might not be available
    }
  }
}

Future improvements

We're actively working on a more robust solution that will:

• Auto-detect SPA navigation patterns

• Eliminate the need for manual cleanup in most scenarios

This documentation will be updated once these improvements are released.