在刷新时保存嵌入式应用的内容
可以使被嵌入的应用程序在刷新时保存其内容，这与普通的Vaadin应用程序一样，使用 @PreserveOnRefresh 注解。不过，由于Vaadin嵌入式应用程序的特殊性，在嵌入组件时注解使用方式有一些变化。
在嵌入时使用@PreserveOnRefresh
在常规注解使用情况下，@PreserveOnRefresh`注解被加到用户希望保存的[classname]`Component`上。而当需要保存可嵌入的Web Components时，则应将@PreserveOnRefresh`注解附加到[classname]`WebComponentExporter`类上。这种保存方式将影响由该Exporter生成的所有嵌入实例。
Source code
Java
@PreserveOnRefresh
public class EmbeddedComponentExporter
extends WebComponentExporter<EmbeddedComponent> {
public EmbeddedComponentExporter() {
super("embedded-component");
}
@Override
protected void configureInstance(
WebComponent<EmbeddedComponent> webComponent,
EmbeddedComponent component) {
}
}如果您希望同一Web Component有两个版本，其中一个用于保存状态，另 一个不用于保存状态，则可以在不同的标签下将同一个[classname]`Component`导出两次：
Source code
Java
@PreserveOnRefresh
public class EmbeddedComponentExporter1
extends WebComponentExporter<EmbeddedComponent> {
public EmbeddedComponentExporter1() {
super("embedded-component-1");
}
@Override
protected void configureInstance(
WebComponent<EmbeddedComponent> webComponent,
EmbeddedComponent component) {
}
}
public class EmbeddedComponentExporter2
extends WebComponentExporter<EmbeddedComponent> {
public EmbeddedComponentExporter2() {
super("embedded-component-2");
}
@Override
protected void configureInstance(
WebComponent<EmbeddedComponent> webComponent,
EmbeddedComponent component) {
}
}保持嵌入式应用程序的标识独立性
由于嵌入式Vaadin应用程序存在于本身通常并非Vaadin应用程序的页面中，因此由服务器端Vaadin Component 支持的嵌入式Web Component会使用生成的ID来连接这两个方面。当客户端的自定义标签升级成Vaadin Web Component并连接至服务器端的[classname]Component 时，它将发送一个标识符到服务器，以便Vaadin可以匹配这两个组件。
每个嵌入的Web Component都会为自己生成一个标识符，由其标签和递增的计数器构成。例如，一个页面上的两个 <embedded-component> Web Components可能分别拥有标识符 EmbeddedComponent-0 和 EmbeddedComponent-1。为了确保Web Component实例得到独立地保存，并且其状态不会泄露到其他该Web Component的实例中，这个生成的ID会与窗口名称相结合，并且状态存储在用户的会话中。这样就可以在网页位置内部存储和恢复用户的Web Component状态。
然而，由于标识符本质上是一个递增的计数器，如果一个Web Component实例在嵌入式应用程序的两个位置嵌入，那么这些状态可能会发生"混淆"。
例如，用户正在访问位置`example.com/location-1`，其中嵌入了一个名为`embedded-component`的实例。现在，如果该用户导航到`example.com/location-2`，且该页面也嵌入了一个`embedded-component` 实例，那么之前保存的状态将显示在新位置`location-2`的`embedded-component`中。
如果 您希望嵌入式Web Component的状态能在不同页面之间共享，则无需做额外处理。但由于标识是递增数字形式，当相同组件拥有多个实例分布在不同页面时，可能会产生意外行为。
为了确保状态按您期望的方式保存，您可以给Web Component分配显式的`id`属性以获得一致的行为。
控制标识符
给嵌入式Web Component 分配一个`id`属性从而明确其标识符。手动赋值的`id`将取代生成的组件标识符，为该嵌入式Web Component提供一个一致的身份标识。
Source code
HTML
<div>
<embedded-component id="uniquely-preserved"></embedded-component>
</div>然后可使用这个`id`确保不同的页面位置之间的状态是共享的还是不共享的。如果您想让这个组件的状态可跨多个位置保存，请在多个位置的嵌入Web Component上使用相同的`id`：
Source code
HTML
<!-- location-1 -->
<div>
<embedded-component id="cross-preserved"></embedded-component>
</div>
<!-- location-2 -->
<div>
<embedded-component id="cross-preserved"></embedded-component>
</div>不过，如果您希望确保状态仅在某个特定位置内被保存，可以在不同位置的嵌入式Web Component实例上赋予不同的`id`属性：
Source code
HTML
<!-- location-1 -->
<div>
<embedded-component id="location-1-preserved"></embedded-component>
</div>
<!-- location-2 -->
<div>
<embedded-component id="location-2-preserved"></embedded-component>
</div>BD0E7359-683E-43C0-97A2-014874030E71