vscode: incorrect Web API localStorage and sessionStorage behavior in Theia webview

[jcortell68]

Bug Description:

Using window.localStorage and window.sessionStorage from a vscode extension Webview in Theia doesn't behave as expected--not compared to how it works in VS Code.

Data stored in sessionStorage survives a number of things in VS Code:

• the view being hidden and reshown
• the view being closed and reopened
• the app being refreshed (with CTRL-R)
• It does not survive an app restart.

Data stored in localStorage survives all those things plus it survives an app restart. I.e., the data is stored to disk.

In Theia, neither storage behaves how it does in VS Code. Both forms only survive the view being hidden and reshown.
 

Steps to Reproduce:

git clone -b webview_storage https://github.com/jcortell68/theiasandbox
cd theiasandbox
yarn
yarn start:electron

1. View > Open View > My Webview
2. Click Increment Counters a few times
3. Note that both counters shown are the same value
4. Click on the Problems view (or another view in the Pane) then bring My Webview back to the forefrount.
5. Click 'Increment Counters`.
6. Note that both counters increased by one from the value you last saw. That's good. Expected and correct.
7. Now close the view. Right click on the tab and hit 'Close'
8. Reopen the view with View > Open View > My Webview
9. Click Increment Counters and notice that both counters got reset. They now have a value of 1. This is the bug.

In VS Code, the counters would not have reset. In fact, even if you CTRL-R (refresh the VS Code app), the counters don't reset.
If you close VS Code altogether, relaunch it, bring up the view and click Increment Counters, you would see that sessionStorage was reset, which is expected. localStorage is not reset as that data is apparently being saved to disk. And that is why there are two forms of storage. One of them stores to the filesystem; the other just to RAM.

You can see this in vscode as follows:

git clone -b webview_storage https://github.com/jcortell68/vscodeextfeatures
cd vscodeextfeatures
yarn
code .

Launch the app from vscode and repeat the steps described above for Theia.

Additional Information

• Operating System: Windows
• Theia Version: 1.43.1

[jfaltermeier]

The webview's iframe src url has a default pattern like this: http://{{uuid}}.webview.{{hostname}}:{{port}}/webview/index.html?id={{uuid}}
The uuid changes between closing and reopening of web views.
The port changes between restarts of the electron app.
I believe that the uuid and port section would have to be more stable, so that the browser storage can work.

[jcortell68]

@jfaltermeier Interesting. Do you know if VS Code's URL for the webview's iframe is significantly different, such that it doesn't suffer from this problem?

[martin-fleck-at]

@jfaltermeier Yeah, I saw that too. However, it is not so easy to work around that. VS Code is using URLs in the form of, based on the GLSP example extension:
vscode-webview://1nh1lgb4d906n8f3arbi9fne31uv19ftmlj3ar3s0pcd5heq4lgh/index.html?id=75849cda-50d9-4967-adf7-4e61765e69f5&origin=d641129a-ff75-4f78-8fcd-468b0634fb99&swVersion=4&extensionId=Eclipse-GLSP.workflow-vscode-example&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app

With 1nh1lgb4d906n8f3arbi9fne31uv19ftmlj3ar3s0pcd5heq4lgh being the frameId, see https://github.com/microsoft/vscode/blob/cd30a6ad3df1f3d77a2c33074fc3d608488b36fa/src/vs/workbench/contrib/webview/electron-sandbox/webviewElement.ts#L92

[jfaltermeier]

Yes, between restarts and reopens it looks like this:

vscode-webview://0a7iho5kovpr5p4ctn5fvcns9h4du51vr2fb4iachonmmqsceaes/fake.html?id=ad9dff6c-9d20-4aec-b8b1-edfeecc19d07
vscode-webview://0a7iho5kovpr5p4ctn5fvcns9h4du51vr2fb4iachonmmqsceaes/fake.html?id=faec60d8-1f93-4e66-94b7-931081a8a4ba
vscode-webview://0a7iho5kovpr5p4ctn5fvcns9h4du51vr2fb4iachonmmqsceaes/fake.html?id=ffe337c5-03fa-445d-b197-1186edd01e20

So the hostname is static