You probably want to persist the state of your tabs across sessions and website reloads. As described above, the xtype of all open tabs is stored automatically which allows you to create the correct tab instances when reloading. However, this does not help to persist the content of the tabs. You have to take care of persisting tab state yourself. For example, when the user sets the URL of the browse tab in the example the URL will be restored after reload. Such internal state of the tab can be stored implementing the interface StateHolder as BrowseTabBase of the example does:

import { mixin } from "@jangaroo/runtime";
import Panel from "@jangaroo/ext-ts/panel/Panel";
import StateHolder from "@coremedia/studio-client.client-core/data/StateHolder";
import ValueExpression from "@coremedia/studio-client.client-core/data/ValueExpression";
import ValueExpressionFactory from "@coremedia/studio-client.client-core/data/ValueExpressionFactory";

class BrowseTabBase extends Panel implements StateHolder {

  #url: string;
  #stateValueExpression: ValueExpression;

  //...

  getStateValueExpression(): ValueExpression {
    if (!this.#stateValueExpression) {
      this.#stateValueExpression = ValueExpressionFactory
        .createFromValue({ url: this.#url });
    }
    return this.#stateValueExpression;
  }
}

mixin(BrowseTabBase, StateHolder);

export default BrowseTabBase;

To store the states of the open tabs CoreMedia Studio uses getStateValueExpression of each tab which implements the interface. See section Section 9.9, “Storing Preferences” for details of how the state is persisted and for the limits on the allowed state structures. You must make sure that proper state is delivered via the state value expression. In BrowseTabBase this is achieved in the following way:

class BrowseTabBase /* ... */ {
  //...

  #reloadHandler(): void {
    const url = this.getTrigger().getValue();
    this.getBrowseFrame().setUrl(url);
    if (url) {
      this.setTitle(url);
    }
    //store the url as state in the user preference
    this.getStateValueExpression().setValue({ url: url });
  }

  //...
}

The reloadHandler is invoked when the user clicks on the trigger button. The value of the trigger becomes the URL of the iFrame of the tab. Finally, the state value is set to {url: url}: As described above, url is a configuration parameter of BrowseTab and consequently, {url:url} is a configuration object with the parameter url with the trigger value. This configuration object will be copied to the configuration object of BrowseTab when restoring it. So BrowseTab's configuration parameter url is then set to the stored value.