快照

暫時性的 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。