快照

短暂的 DOM 状态（例如侧边栏上的滚动位置、<input> 元素的内容等）在您从一页导航到另一页时会被丢弃。

例如，如果用户填写了表单，但在提交之前点击了链接，然后点击浏览器的后退按钮，则他们填写的值将丢失。在有价值保留该输入的情况下，您可以对 DOM 状态进行快照，如果用户导航返回，则可以恢复该快照。

要执行此操作，请从 +page.svelte 或 +layout.svelte 导出带有 capture 和 restore 方法的 snapshot 对象

<script>
	let comment = '';

	/** @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 = '';
	
	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。