Як використовувати Local Storage у Vue.js?

Local Storage — це браузерне сховище, яке дозволяє зберігати дані у вигляді ключ-значення. Збережені дані залишаються навіть після перезавантаження сторінки.

У Vue.js Local Storage використовується для збереження стану, авторизації, темної теми та інших налаштувань.

📌 Основні методи Local Storage

localStorage.setItem("ключ", "значення"); // Збереження
localStorage.getItem("ключ"); // Отримання
localStorage.removeItem("ключ"); // Видалення
localStorage.clear(); // Очистка всього Local Storage

❗ Важливо: Local Storage може зберігати лише рядкові значення, тому об’єкти потрібно перетворювати через JSON.stringify() і JSON.parse().

📌 Використання у Vue 3 (Composition API)

Збережемо та отримаємо значення з Local Storage за допомогою ref().

1. Збереження та отримання простого значення

<template>
  <div>
    <input v-model="username" placeholder="Введіть ім'я" />
    <button @click="saveToLocalStorage">Зберегти</button>
    <button @click="loadFromLocalStorage">Завантажити</button>
    <p>Збережене ім'я: {{ username }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const username = ref("");

const saveToLocalStorage = () => {
  localStorage.setItem("username", username.value);
};

const loadFromLocalStorage = () => {
  username.value = localStorage.getItem("username") || "";
};
</script>

🔹 Як працює?

Користувач вводить ім’я → натискає кнопку “Зберегти” → значення записується в Local Storage.
Натискання “Завантажити” бере значення з Local Storage і оновлює змінну username.

📌 Використання з об’єктами

Якщо потрібно зберегти об’єкт, потрібно використовувати JSON.stringify() та JSON.parse().

<template>
  <div>
    <input v-model="user.name" placeholder="Ім'я" />
    <input v-model="user.age" placeholder="Вік" type="number" />
    <button @click="saveUser">Зберегти</button>
    <button @click="loadUser">Завантажити</button>
    <p>Користувач: {{ user }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const user = ref({ name: "", age: null });

const saveUser = () => {
  localStorage.setItem("user", JSON.stringify(user.value));
};

const loadUser = () => {
  const savedUser = localStorage.getItem("user");
  user.value = savedUser ? JSON.parse(savedUser) : { name: "", age: null };
};
</script>

🔹 Як працює?

Використовуємо JSON.stringify() для збереження об’єкта.
Використовуємо JSON.parse() для його відновлення.

📌 Використання Local Storage з Vuex / Pinia

Якщо у вашому застосунку використовується Pinia (новий Vue Store), можна автоматично синхронізувати стан з Local Storage.

Приклад у Pinia

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => ({
    user: JSON.parse(localStorage.getItem("user")) || { name: "", age: null }
  }),
  actions: {
    saveUser() {
      localStorage.setItem("user", JSON.stringify(this.user));
    },
    loadUser() {
      this.user = JSON.parse(localStorage.getItem("user")) || { name: "", age: null };
    }
  }
});

🔹 Коли стан змінюється, потрібно вручну викликати saveUser() для синхронізації з Local Storage.

📌 Очищення Local Storage при виході

Щоб видалити всі дані користувача при виході:

const logout = () => {
  localStorage.clear(); // Очистка всього Local Storage
};

📌 Висновок

localStorage.setItem(key, value) – збереження даних.
localStorage.getItem(key) – отримання даних.
localStorage.removeItem(key) – видалення конкретного запису.
localStorage.clear() – очищення всього сховища.

Коли використовувати Local Storage у Vue.js?

✅ Для збереження налаштувань користувача (наприклад, тема сайту).
✅ Для автозаповнення форм.
✅ Для збереження інформації між перезавантаженнями сторінки.

🔹 Обережно: Local Storage небезпечно використовувати для збереження чутливих даних (наприклад, токенів доступу).