\n```\n\n**localStorage:**\n```typescript\n// Client-only\nif (process.client) {\n localStorage.setItem(\"theme\", \"dark\")\n const theme = localStorage.getItem(\"theme\")\n}\n```\n\n**Key differences:**\n- **useCookie** — SSR-safe.\n- **localStorage** — client-only.\n- **Cookie** — sent to server."}}]}

Vue.js: What is the difference between useCookie and localStorage in Vue?

145

🟢Vue.js⚡ middle

What is the difference between useCookie and localStorage in Vue?

useCookie — SSR-compatible cookies. localStorage — client-only.

useCookie:

vue

1<script setup>
2const theme = useCookie("theme", {
3    default: () => "light",
4    maxAge: 60 * 60 * 24 * 365
5})
6
7// Update
8theme.value = "dark"
9</script>

localStorage:

typescript

1// Client-only
2if (process.client) {
3    localStorage.setItem("theme", "dark")
4    const theme = localStorage.getItem("theme")
5}

Key differences:

useCookie — SSR-safe.
localStorage — client-only.
Cookie — sent to server.

Больше вопросов по Vue.js

What is the difference between useRuntimeConfig and .env in Nuxt 3?What is the difference between definePageMeta and page meta in Nuxt 2?

Назад к категории Vue.js