useHistoryState

This function reactively stores a value in the history state of the current history entry.

Usage

useHistoryState accepts a key as its first argument and an initial value as its second. The key is an identifier for storing the initial value.

The function returns the saved state if it exists, or the the initial value otherwise.

<script setup lang="ts">
const name = useHistoryState('name', '')
</script>

<template>
	<input type="text" v-model="name" />
</template>

The example above will save a name property in the history state, only for the current browing history entry. When navigating back and then forward, the entry will be restored. When refreshing, the entry will have disappeared.