スナップショット
サイドバーのスクロール位置、<input> 要素の内容などの一時的な DOM ステートは、あるページから別のページに移動すると破棄されます。
たとえば、ユーザーがフォームに入力した内容が送信されずに移動して戻ってきた場合や、ユーザーがページを更新した場合、入力した値は失われます。その入力を保持することが重要な場合は、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 関数が呼び出されます。
このデータは sessionStorage に永続化できるよう、JSON としてシリアル化可能である必要があります。これにより、ページがリロードされたときや、ユーザーが別のサイトから戻ってきたときにステートを復元できます。
captureからは非常に大きなオブジェクトを返さないようにします。— キャプチャされたオブジェクトはセションの間、メモリに保持されることになり、極端な場合、sessionStorageに永続化するには大きすぎる可能性があります。
前へ 次へ