Quasar용 SessionStorage, LocalStorage 사용하기

Quasar 전용 SessionStorage, LocalStorage의 장점

 데이터 직렬화 없이 바로 사용가능하다.

// 일반적인 storage 사용시에는 직렬화해서 데이터를 입출력 해야함.
// 따라서 JSON.stringify, JSON.parse 가 항상 따라다님.
const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // John

// 반면에 $q.localStorage는 직렬화 없이 바로 입출력이 가능함.
const user = { name: 'John', age: 30 };
this.$q.localStorage.set('user', user);
const storedUser = this.$q.localStorage.getItem('user');
console.log(storedUser.name); // John

 

준비 : 플러그인 등록

// quasar.conf.js
module.exports = function (ctx) {
  return {
    // ...
    framework: {
      // ...
      plugins: ['LocalStorage', 'SessionStorage']
      // ...
    }
    // ...
  }
}

 

사용 방법

사용시 vue파일과 아닌곳에서 사용법이 조금 달라서 햇갈리므로 주의가 필요함.

 

.vue 파일에서 사용

<script setup>
import { useQuasar } from 'quasar'

const $q = useQuasar()

// LocalStorage에 데이터 저장하기
$q.localStorage.set('myKey', 'myValue')

// LocalStorage에서 데이터 읽기
const value = $q.localStorage.getItem('myKey')
console.log(value) // 'myValue'
</script>

 

.vue 파일이 아닌 곳에서 사용(.ts, .js 등등)

import { LocalStorage, SessionStorage } from 'quasar'

LocalStorage.set(key, value)
let value = LocalStorage.getItem(key)

SessionStorage.set(key, value)
let value = SessionStorage.getItem(key)

 

사용시 주의사항

 Quasar Storage를 사용하기로 했다면, 절대로 Web Storage를 사용하면 안됩니다.

 왜냐하면 모든 데이터는 Web Storage에 저장되는것은 맞지만 Quasar Storage는 저장할때 메타데이터도 함께 저장하므로 실제적으로 저장된 값은 다릅니다(심지어 str 타입이라고 해도 다르게 저장됩니다).

 

자세한 사용 방법 - Quasar 공식 홈페이지

https://quasar.dev/quasar-plugins/web-storage#localstorage-api