Local Storage

상태 유지하기

• 현재 앱을 재실행 하거나, 새로 고침을 하면 초기 값으로 돌아감
• MDN 메인 페이지에서 테마를 설정하고, 새로 고침해도 테마는 유지되어 있음
  • 개발자 도구 > Application > Local Storage에서 확인
  • theme Key에 light Value가 저장되어 있음
    • theme Key에 dark Value로 값을 변경하고 새로고침 하면?

Window.localStorage

• 브라우저의 내장 객체 중 하나
• Key-Value 형태로 데이터를 저장할 수 있는 저장소
• localStorage에 저장된 데이터는 브라우저를 종료해도 계속해서 유지 됨
  • 다른 탭에서도 동일한 데이터를 공유할 수 있는 반면, 다른 도메인에서는 접근할 수 없음
  • 단, 보안과 관련된 중요한 정보를 저장하기에는 적합하지 않음

setItem(key, value)

• key, value 형태로 데이터 저장
• 데이터 저장 시 문자열 형태로 저장됨에 주의

const numbers = [1, 2, 3]
localStorage.setItem('name', 'SSAFY')
localStorage.setItem('age', 30)
localStorage.setItem('numbers', numbers)

getItem(key)

• key 값으로 저장된 데이터 불러오기
• 데이터 저장 시 문자열 형태로 저장하였으므로, 불러올때도 문자열로 불러옴

const name = localStorage.getItem('name')
const age = localStorage.getItem('age')
const nums = localStorage.getItem('numbers')

console.log(age) // 30
console.log(typeof age) // string

console.log(nums) // 1,2,3
console.log(typeof nums) // string

JSON.stringify

• JSON (JavaScript Object Notation) 객체의 메서드
• 자바스크립트 객체를 JSON 형식의 문자열로 변환하여 반환

const numbers = [1, 2, 3]
const stringifyNumbers = JSON.stringify(numbers)

console.log(stringifyNumbers) // [1,2,3]
console.log(typeof stringifyNumbers)  // string

localStorage.setItem('numbers', stringifyNumbers)

JSON.parse

• JSON 형식의 문자열을 자바스크립트 객체로 변환하여 반환

// parse 전 출력 결과

const age = localStorage.getItem('age')
const numbers = localStorage.getItem('numbers')

console.log(age) // 30
console.log(typeof age) // string
console.log(numbers) // [1,2,3]
console.log(typeof numbers) //string

// parse 후 출력 결과

const parsedAge = JSON.parse(age)
const parsedNumbers = JSON.parse(numbers)

console.log(parsedAge) // 30
console.log(typeof parsedAge) // number
console.log(parsedNumbers) //[1, 2, 3]
console.log(typeof parsedNumbers) // object

Vuex에 적용하기

// App.vue
<template>
	<div id="app">
		<h1>{{ message }}</h1>
		<input
		type="text"
		@keyup.enter="changeMessage"
		v-model="inputData“>
	</div>
</template>

<script>
	export default {
	...
	created() {
		this.$store.dispatch('loadMessage')
	}
}
</script>

// src/store/index.js

export default new Vuex.Store({
  state: {
    message: 'message in state'
  },
  getters: {
    messageLength(state) {
      return state.message.length
    },
    // messageLength를 이용해서 새로운 값을 계산
    doubleLength(state, getters) {
      return getters.messageLength * 2
    },
  },
  mutations: {
    CHANGE_MESSAGE(state, message){
      // console.log(state)
      // console.log(message)
      state.message = message
    },
    LOAD_MESSAGE(state) {
      // localstorage에서 데이터를 꺼내옴
      const parsedMessage = JSON.parse(localStorage.getItem('message'))
      state.message = parsedMessage ? parsedMessage : ''
    },
  },
  actions: {
    changeMessage(context, message){
      // console.log(context)
      // console.log(message)
      context.commit('CHANGE_MESSAGE', message)
      // localstorage에 저장
      context.dispatch('messageSaveToLocalStorage')
    },
    messageSaveToLocalStorage(context){
      const message = JSON.stringify(context.state.message)
      localStorage.setItem('message', message)
    },
    loadMessage(context) {
      context.commit('LOAD_MESSAGE')
    }
  **},**
  modules: {
  }
})

• 새로고침 해도 초기화 되지 않는 것 확인
  • local storage에 저장된 것 delete후 새로고침 하면 초기화 됨.

plugins

• Vuex store에 추가적인 기능을 제공하는 확장 기능
• 일반적으로 state의 변화를 감지해, 어플리케이션의 성능을 최적화하는 목적을 가짐

vuex-persistedstate

• Vuex store의 상태를 브라우저 local storage에 저장해 주는 plugin
• 페이지를 새로 고침하거나 브라우저를 종료하였다가 다시 열었을 때, 이전 상태를 유지할 수 있도록 해줌

설치 및 적용

• 설치

$ npm i vuex-persistedstate

• 적용

// index.js

import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)
export default new Vuex.Store({
	plugins: [
		createPersistedState(),
	],
...

• 메시지 입력 후, Local Storage 확인

• vuex key에 state의 message가 가진 값들이 value로 할당 됨
• 브라우저를 종료 후, 다시 서버를 열었을 때도 vuex의 상태가 유지됨을 확인

[참고] 추가 옵션을 사용하여 필요에 따라 저장 방식을 변경 할 수 있음

const persistedState = createPersistedState({
	// key를 변경
	key: 'my-app',
	// 저장 위치를 변경
	storage: window.localStorage,
	// 상태중 일부만 저장
	reducer: state => ({
		message: state.message
	})
})

export default new Vuex.Store({
	plugins: [
		persistedState
	],
	state: {
		message: 'message in store',
		age: 30
	}
})