快照
短暂的 DOM 状态（例如侧边栏上的滚动位置、<input> 元素的内容等）在您从一个页面导航到另一个页面时会被丢弃。
例如，如果用户填写了一个表单，但在提交之前导航离开然后返回，或者如果用户刷新页面，他们填写的值将会丢失。在需要保留这些输入值的场景中，您可以对 DOM 状态进行快照，然后在用户导航返回时恢复。
要执行此操作，请从 +page.svelte 或 +layout.svelte 中导出具有 capture 和 restore 方法的 snapshot 对象。
+page
<script>
let comment = $state('');
/** @type {import('./$types').Snapshot<string>} */
export const snapshot = {
capture: () => comment,
restore: (value) => comment = value
};
</script>
<form method="POST">
<label for="comment">Comment</label>
<textarea id="comment" bind:value={comment} />
<button>Post comment</button>
</form><script lang="ts">
import type { Snapshot } from './$types';
let comment = $state('');
export const snapshot: Snapshot<string> = {
capture: () => comment,
restore: (value) => comment = value
};
</script>
<form method="POST">
<label for="comment">Comment</label>
<textarea id="comment" bind:value={comment} />
<button>Post comment</button>
</form>当您从该页面导航离开时，capture 函数会在页面更新之前立即被调用，并且返回的值与浏览器历史记录堆栈中的当前条目关联。如果您导航返回，则在页面更新后立即使用存储的值调用 restore 函数。
数据必须能够序列化为 JSON，以便可以将其持久化到 sessionStorage 中。这允许在重新加载页面或用户从其他站点导航返回时恢复状态。
避免从
capture返回非常大的对象——一旦捕获，对象将在会话期间保留在内存中，在极端情况下，对象可能太大而无法持久化到sessionStorage中。