1. Local Storage
: 브라우저를 종료하고 다시 실행해도 데이터가 보존될 수 있도록 하기
1. Window.localStorage
- 브라우저에서 제공하는 저장공간 중 하나인 Local Storage에 관련된 속성
setItem(key, value)- key, value 형태로 저장
getItem(key)- key에 해당하는 데이터 조회
2. Local Storage 실습
- 데이터가 문자열 형태로 저장되어야 하기 때문에
JSON.stringify를 사용해 문자열로 변환해 주는 과정이 필요하다.
- todo 생성, 삭제, 수정 시에 모두 saveTodosToLocalStorage action 메서드가 실행 되도록 한다.
2. Vuex-persistedstate
: Vuex state를 자동으로 브라우저의 Local Storage에 저장해주는 라이브러리 중 하나
- 페이지가 새로고침 되어도 Vuex state를 유지시킴
- Local Storage에 저장된 data를 자동으로 state로 불러옴
1. 설치
$npm i vuex-persistedstate
2. 적용
// index.js
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Veux.Store({
plugins: [
creeatePersistedState(),
],Uploaded by N2T