# 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

```jsx
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

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

### Angular Implementation

```typescript
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.calcumate.co/calcumategeo-session-storage-cleanup-in-single-page-applications.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.