Vue LocalStorage

---

💾 LocalStorage를 쓰는 이유

정의

LocalStorage는 브라우저에 문자열 데이터를 영구적으로 저장할 수 있는 저장소다.

페이지를 새로고침해도 값이 남아 있어서, 로그인 상태 일부나 사용자 설정 같은 값을 유지할 때 유용하다.

🧩 특징

• 브라우저에 저장되므로 서버로 전송되지 않는다.
• 새로고침 후에도 데이터가 유지된다.
• 탭을 닫아도 남아 있는 경우가 많다.
• 문자열만 저장할 수 있으므로 객체는 변환이 필요하다.

🛠️ 기본 사용 예시

localStorage.setItem("token", "abc123");
const token = localStorage.getItem("token");
localStorage.removeItem("token");
localStorage.clear();

📦 Vue에서 사용하는 방식

Vue 프로젝트에서는 보통 상태 관리와 함께 LocalStorage를 연결한다.

pinia-plugin-persistedstate

• Pinia 상태를 LocalStorage에 자동 저장하는 플러그인이다.
• 저장/복원 코드를 줄일 수 있다.

설치

npm i pinia-plugin-persistedstate

main.js에서 등록

import { createApp } from "vue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

import App from "./App.vue";
import router from "./router";

const app = createApp(App);
const pinia = createPinia();

pinia.use(piniaPluginPersistedstate);

app.use(pinia);
app.use(router);
app.mount("#app");

store에서 persist 사용

import { defineStore } from "pinia";

export const useUserStore = defineStore(
  "user",
  () => {
    return {};
  },
  {
    persist: true,
  }
);

⚠️ 주의점

• 민감한 정보는 LocalStorage에 그대로 저장하지 않는다.
• 객체를 저장할 때는 JSON.stringify와 JSON.parse를 사용한다.
• 저장 구조를 너무 복잡하게 만들지 않는 것이 좋다.

📌 정리

• LocalStorage는 브라우저에 데이터를 오래 유지할 때 사용한다.
• Vue에서는 Pinia와 함께 지속 저장 용도로 많이 쓴다.
• 상태 관리와 함께 보면 활용하기 쉽다.

---

연결문서

• Vue-State
• Vuejs
• Vue-환경변수