快照
當您從一個頁面導覽到另一個頁面時，暫時性的 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。