app.storage.tab is not unique for duplicate tabs

[falkoschindler]

Discussed in #3867

^{Originally posted by kfalcami October 11, 2024}

Question

I did a quick experiment to test app.storage.tab storage (below), running on localhost. Every new tab that connects prints "new!..." with a unique value, but any tab I create with "Duplicate" in Chrome (or "Duplicate Tab" in Edge) prints "already..." with the same value as the duplicated tab. This isn't mentioned on the storage page, not sure if this is a bug or expected behavior? Is there any way to get unique storage for Duplicate tabs?

@ui.page('/')
    async def index(request: Request) -> None:
        await ui.context.client.connected()
        chat_exchanges_key = 'chat_exchanges'
        if chat_exchanges_key in app.storage.tab:
            print(f'~~~ already set! {app.storage.tab[chat_exchanges_key]}')
        else:
            x = randint(1, 99)
            app.storage.tab[chat_exchanges_key] = x
            print(f'~~~ new! setting to {x}')

---

It turns out NiceGUI's tab storage behaves differently than the JavaScript session storage:

The contents of sessionStorage is "copied" not "shared". Any changes made to sessionStorage after the tab is duplicated are not reflected in the other tab's sessionStorage.
https://stackoverflow.com/questions/21463696/duplicate-tab-copying-sessionstorage-in-chrome

The tab storage is copied and shared. We should try to detect the duplication, create a new tab ID, copy the storage and continue working on the new instance with the new tab ID.