快照
临时的 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">评论</label>
<textarea id="comment" bind:value={comment} />
<button>发表评论</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">评论</label>
<textarea id="comment" bind:value={comment} />
<button>发表评论</button>
</form>当您离开这个页面时，capture 函数会在页面更新之前立即被调用，返回的值会与浏览器历史栈中的当前记录关联。如果您返回此页面，restore 函数会在页面更新后立即被调用，并传入存储的值。
数据必须是可以序列化为 JSON 的，这样它才能被保存到 sessionStorage 中。这样就可以在页面重新加载时，或者用户从其他网站返回时恢复状态。
避免从
capture返回非常大的对象 — 一旦被捕获，对象将在会话期间保留在内存中，在极端情况下可能会因太大而无法保存到sessionStorage中。