app.storage.tab not unique for Duplicate tabs

[kfalcami]

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}')

[python-and-fiction]

Because duplicating tab will create the same tab_id of tabs.
ui.label(ui.context.client.tab_id)

[kfalcami]

Ok that explains it, and thanks for revealing the tab_id, I don't think that's documented in any of the nicegui pages. I guess it would be nice if the docs mentioned that app.storage.tab is NOT unique for "Duplicate" pages, I'm probably not the only one using it who isn't super-familiar with the details of browsers.

[rodja]

Sure. For me it's kind of obvious that "duplicate" is really a duplication and not a new tab. But more clarity on this could still be beneficial. Would you like to create a small pull request for that addition to the docs?

[kfalcami]

I think there are really 2 surprises that made this less-than-obvious for me anyway: I had apparently used "Duplicate" a few days ago to open the 2nd tab and had no idea why the unique storage wasn't working as documented until I finally created a fresh new tab and saw that it now it worked correctly. Also, I can't think of any other web page that I've ever used that where a "Duplicate" tab and the original tab were magically updating with anything I did on the other tab, but that's what happened here since I was using the app.storage.tab to provide data to populate the page. More of a feature than a bug in the right context I guess :)

Sure, I'll try to come up with wording that would make it clearer.

[falkoschindler]

The reason seems to be that the session storage is copied when duplicating Chrome tabs. Other browsers might behave differently, as this discussion points out:
https://stackoverflow.com/questions/21463696/duplicate-tab-copying-sessionstorage-in-chrome

In Chrome, Yes. And you've hit on an important distinction. 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.

NiceGUI stores a "__nicegui_tab_id" in the session storage. By copying it, the new tab uses the same tab ID.

To me it also feels a bit strange. When duplicating the tab, I wouldn't expect it to share the tab storage with the original tab, because it is - after all - a separate tab. Some users might rely on the fact that there's always only one client interacting with one tab storage. I wonder if there is a way to detect the tab duplication in JavaScript and to reset the tab ID in this case.

[falkoschindler]

I created issue #3872 to fix NiceGUI's tab storage so that it behaves like the session storage.