Preferences

A setting the user picks once belongs in localStorage, where it survives a reload and a closed browser.

localStorageempty

Show code

theme.vue

vue

<script setup lang="ts">
import { parseAsStringLiteral } from 'usewagen'
import { useLocalStorage } from 'usewagen/storage'

const theme = useLocalStorage({
  key: 'theme',
  parser: parseAsStringLiteral(['light', 'dark']).withDefault('light'),
})
</script>

<template>
  <div class="demo-row">
    <select v-model="theme">
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>

    <span>The {{ theme }} theme is stored.</span>
  </div>
</template>

The bar above shows the entry as it is stored, prefix included. Choosing the dark theme writes it, and choosing the light one removes the entry, since a missing entry already reads as light.

Local storage is shared by every tab of a site. Open this page in a second tab and change the theme there: the demo in this one follows.

Preferences ​

Preferences